安装
使用npm
- npm install react-axios
注意以下依赖的安装:
- npm install axios
- npm install react
- npm install prop-types
配置axios拦截器文件
/**
* axios.defaults 修改默认操作
*/
import axios from 'axios'
export default class Interceptors {
static init(){
// 拦截请求
axios.interceptors.request.use(req => {
console.log('拦截请求', req);
req.url = `https://cnodejs.org/${req.url}`;
return req;
}, err => {
console.log(err);
return Promise.reject(err);
});
// 拦截回应
axios.interceptors.response.use(res => {
console.log('拦截回应', res);
return res.data;
}, err => {
console.log(err);
return Promise.reject(err);
});
}
};
执行Interceptors文件
umi框架提供了 global.ts 文件。此文件会在入口文件的最前面被自动引入,可以在这里加载补丁,做一些初始化的操作等。
我们可以在global.ts文件中执行我们的Interceptors方法让路由拦截生效。
// 生效路由拦截器
import Interceptors from './interceptors';
Interceptors.init();
为什么要路由拦截
可以对api做统一处理,然后就可以实现配置请求头,配置baseurl。最方便的是,方便可api鉴权。