axios拦截器

axios

相比于fetch,axios的API更加的完善,axios也是支持promise的,而且response返回的数据已经经过了json处理,所以不需要手动的去进行转化为我们需要的json格式。

今天主要讲的是axios的拦截功能。

axios.interceptor

我们在这里值讨论request和response

axios的拦截器主要分为两个(只是针对request和response,对于其他的put,header,options暂不做分析),分别针对的是request请求前进行拦截处理,和response响应后进行拦截处理。代码如下:

// 如果想在请求前在header中增加token
axios.interceptor.request.use((config) => {
  const token = sessionStorage.getItem('token');
  if(token) {
    config.headers.token = `${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.interceptor.request.use中有两个函数,第一个函数是对config进行一些处理,第二个函数是处理失败后的情形。request主要是在请求前对设置进行一些处理和改变。

下面是response响应后的拦截器

// 对error进行一些处理,一般用来检验是否超时或是token是否失效
axios.interceptor.response.use((response) => {
  return response;
}, (error) => {
  // 超时(假设8888状态码代表着超时)
  if(error.code === '8888') {
    // 返回登录页面
    this.props.history.push('/login'); // 用了react-router
  }
  return Promise.reject(error);
});

axios.interceptor.response.use同样也有两个函数,第一函数代表着返回的结果,如果你需要对其进行一些包装,可以在第一个函数中执行。第二个函数是失败后的一些处理,像对超时的处理可以放在这里做。如果你在response里面什么都没有做,那么也可以写成这样。

// 对error进行一些处理,一般用来检验是否超时或是token是否失效
axios.interceptor.response.use(undefined, (error) => {
  // 超时(假设8888状态码代表着超时)
  if(error.code === '8888') {
    // 返回登录页面
    this.props.history.push('/login'); // 用了react-router
  }
  return Promise.reject(error);
});

移除拦截器

如果要移除拦截器,那么可以这样:

// 如果想在请求前在header中增加token
const myReqInterceptor = axios.interceptor.request.use((config) => {
  const token = sessionStorage.getItem('token');
  if(token) {
    config.headers.token = `${token}`;
  }

  axios.interceptor.request.eject(myReqInterceptor);

  return config;
}, (error) => {
  axios.interceptor.request.eject(myReqInterceptor);

  return Promise.reject(error);
});

为啥要放里面呢?我在外面试了一下,如果放在外面的话,里面的函数不会执行到,我想是因为异步的原因把,还没有执行到里面的函数的时候,拦截器已经被移除了,所以我就放在了里面。response移除是一样的原理,只需要把request改为response就可以了。

总结

总体来说,axios比fetch要好用很多,而且兼容方面,axios支持IE8+,同时axios响应时直接给你生成json格式,还有我今天提到的拦截器。所以总体来说axios还是不错的。