axios拦截器的使用方法

很多时候我们需要在发送请求和响应数据的时候做一些页面处理，比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header，或者在请求到数据之前页面显示loading等等，还有在响应到数据的之后做一些判断，例如服务器返回401登录状态失效，需要重新登录的时候，跳转到登录页，请求成功后关闭页面loading等，这个时候我们就可以用到axios拦截器来做这一系列的事情。

axios拦截器分为请求拦截器和响应拦截器两种。

请求拦截器

axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么，例如加入token
    .......
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器

axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    ......
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

完整代码：

export function request(config) {
  // 1、创建axios实例
  const instance = axios.create({
    baseURL: "http://106.54.54.237:8000/api/v1",
    timeout: 10000
  });

  // 2、axios的请求拦截器
  instance.interceptors.request.use(
    req => {
      Toast.loading({
        // loading的时候禁止点击
        forbidClick: true,
        message: "加载中..."
      });
      return req; //拦截完再发送出去
    },
    err => {
      return Promise.reject(err);
    }
  );

  // 3、axios的响应拦截器
  instance.interceptors.response.use(
    res => {
      // 保证最少500毫秒的加载时间
      setTimeout(() => {
        Toast.clear();
      }, 500);
      return res.data; //拦截完再返回数据
    },
    err => {
      return Promise.reject(err);
    }
  );

  //发送真正的请求
  return instance(config);
}

https://blog.csdn.net/weixin_39378691/article/details/83750056