关于前端:奇怪的-axios-拦截器

💣 事件通过

这是一个工作中发现的问题，简略形容一下场景：后端 api 接口返回格局大抵如下：

{
  code: 200, // 200 示意接口返回失常，非 200 则为异样
  data: {}, // 返回的数据
  message: '', // 接口报错时的错误信息
}

• 当 code 字段为 200 时，则示意接口失常，这时候咱们失常取数据就行；
• 当 code 为非 200 时，示意接口异样，此时咱们须要把对应的错误信息进行弹窗报错；

这属于一个通用的解决，因而咱们能够利用 axios 返回拦截器进行解决：

import axios from 'axios';

const handleRes = config => {if (config.data.code !== 200) {throw config;}
  return config;
};

const handleErr = error => {// 把错误信息进行弹窗};

axios.interceptors.response.use(handleRes, handleErr);

=.= 这就是我的直觉写法，handleRes 函数对响应体进行解决，对返回数据的 code 进行判断，如果不为 200 则抛出一个谬误，并由 handleErr 函数捕捉，而后再进行弹窗解决。

💥 究竟还是出问题了

想法很美妙，但其实 handleErr 是不失效的……

贴个官网的示例：

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  return response;
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error);
});

只有状态码超过 2xx 便会触发这个函数

也就是说，它只会在申请异样时触发，也就是接口 http code 不为 2xx 时。

💊 发现起因

解决问题，首先要钻研源码 =.=

const responseInterceptorChain = [];
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
});

// ... 省略一大段代码

try {promise = dispatchRequest.call(this, newConfig);
} catch (error) {return Promise.reject(error);
}

i = 0;
len = responseInterceptorChain.length;

while (i < len) {promise = promise.then(responseInterceptorChain[i++], responseInterceptorChain[i++]);
}

能够看出拦截器中的参数最终会作为 Promise.prototype.then 的参数，也就是说咱们的代码能够等同于：

promise.then(handleRes, handleErr);

而 handleErr 函数只捕捉 promise 变量的谬误，不捕捉 handleRes 函数中的谬误，如果须要捕捉，应该在前面应用 catch 或是 then 函数：

promise.then(handleRes, handleErr).catch(err => {});
promise.then(handleRes, handleErr).then(undefined, err => {});

换成拦截器的语法，也就是再新增一个响应拦截器，定义一个谬误捕捉函数：

import axios from 'axios';

const handleRes = config => {if (config.data.code !== 200) {throw config;}
  return config;
};

const handleErr = error => {// 把错误信息进行弹窗};

axios.interceptors.response.use(handleRes);
axios.interceptors.response.use(undefined, handleErr);

🍔 后续

谢谢观看，心愿能够帮到你！