axios学习: 拦截器 request/response/error

针对 axios 的拦截器的几种形式的改造

几个关心的点

request: 对 request 进行拦截
response: 对正常的 response 进行拦截
error: 这个是指返回的 response 产生的 error

axios默认用法

用法代码简化版

request 拦截

用法	代码	简化版
request 拦截	`// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });`	`// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; });`
response 拦截	`// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });`	`// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; });`
error 拦截	`axios.interceptors.response.use((response) => response, (error) => { // whatever you want to do with the error throw error; });`	`在实际业务中，这里的处理可能是(http code 或者业务 code) 1. 遇到403，跳转到登录页 2. 遇到50x，提示：服务器开小差了 3. 遇到其它，提示XXX消息 4. 或者根据 statusCode 来进行不同的消息弹了`

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
});

response 拦截

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
});

error 拦截

axios.interceptors.response.use((response) => response, (error) => {
  // whatever you want to do with the error
  throw error;
});

在实际业务中，这里的处理可能是(http code 或者业务 code)
1. 遇到403，跳转到登录页
2. 遇到50x，提示：服务器开小差了
3. 遇到其它，提示XXX消息
4. 或者根据 statusCode 来进行不同的消息弹了

抽象成 interceptors

type: 根据对应的 type 来注册对应的 interceptor
fn: 具体方法
disabled: 是否禁用，默认是不禁用

const interceptors = [
  { type: 'request', fn: (config) => config, disabled: false },
  { type: 'response', fn: (response) => response, disabled: false },
  { type: 'error', fn: (error) => error, disabled: false },
];

几个关心的点

axios默认用法

抽象成 interceptors

参考