umi 配置axios请求拦截

安装

使用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鉴权。