react里面如何做axios拦截
在React中使用Axios拦截器可以统一处理请求和响应，例如添加认证头、错误处理等。以下是具体实现方法：
创建Axios实例并设置拦截器
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response.status === 401) {
// 处理未授权情况
}
return Promise.reject(error);
}
);
export default instance;在组件中使用自定义实例
import React, { useEffect } from 'react';
import api from './axiosInstance'; // 导入自定义实例
function MyComponent() {
useEffect(() => {
api.get('/users')
.then(data => console.log(data))
.catch(error => console.error(error));
}, []);
return <div>Axios拦截器示例</div>;
}全局错误处理
对于需要全局捕获的错误，可以在响应拦截器中统一处理：
instance.interceptors.response.use(
response => response,
error => {
if (error.response) {
switch (error.response.status) {
case 404:
alert('请求资源不存在');
break;
case 500:
alert('服务器错误');
break;
default:
alert('未知错误');
}
}
return Promise.reject(error);
}
);取消请求
在组件卸载时取消pending请求：
import { CancelToken } from 'axios';
useEffect(() => {
const source = CancelToken.source();
api.get('/users', {
cancelToken: source.token
});
return () => {
source.cancel('组件卸载取消请求');
};
}, []);以上方法实现了请求和响应的拦截处理，可根据实际需求调整拦截逻辑。注意拦截器执行顺序是后添加的先执行。
