重写 axios ，添加拦截器

在我们的平时工作中，有一些业务场景会让我们需要使用到拦截器。那拦截器是什么，有何作用呢？

拦截器一般分为两种，拦截请求和拦截响应

请求拦截器
我的理解是拦截每次的请求，进行一定的处理，比如说在每个请求体里加上 token 啊，域名啊，它可以帮助我们统一管理我们的 http 请求，以后修改也比较方便，增强了代码的可维护性

axios.interceptors.request.use(function (config) {
    // 在发送请求前做一定的处理
    ......
    return config;
  }, function (error) {
    // 如果请求错误需要做什么处理
    return Promise.reject(error);
  });

响应拦截器
接收到服务器的响应之后进行一些处理

axios.interceptors.response.use(function (response) {
    // 接收到响应应该做些什么
    ......
    return response;
  }, function (error) {
    // 如果响应错误需要做什么处理
    return Promise.reject(error);
  });

以下是重写 axios ，添加拦截器的示例代码，比如说我在发送请求前统一加上了 http://localhost:3000 ，我在接收到服务器的响应后根据 code 来判断是否是我们需要的数据，它帮助了我们在发送请求和接收到服务器响应之后做了一层拦截，让我们能够进行一些操作，还是非常强大的，恩，nice ~

// 重写axios
import axios, {AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosPromise} from 'axios'
import {message as messageAlert} from 'antd'

messageAlert.config({
  top: 200
});

export interface ResponseData{
  code: 0 | 1 | -1,
  message: string,
  data: any
}

class HtttpRequest{

  // 合并配置项
  private mergeConfig(...configs: AxiosRequestConfig[]): AxiosRequestConfig{
    return Object.assign({}, ...configs);
  }

  // 设置get请求别名
  public get(url: string, config: AxiosRequestConfig = {}): AxiosPromise{
    const newConfig = this.mergeConfig(config, {url, method: 'GET'});
    return this.request(newConfig);
  }

  // 设置post请求别名
  public post(url: string, data: any = {}, config: AxiosRequestConfig = {}): AxiosPromise{
    const newConfig = this.mergeConfig(config, {url, method: 'POST'});
    return this.request(newConfig);
  }

  // 构建请求
  public request(config: AxiosRequestConfig): AxiosPromise{
    // 1.创建请求
    const instance: AxiosInstance = axios.create();
    // 2.添加拦截
    this.interceptor(instance);
    // 3.发送请求
    return instance(config);
  }

  // 添加拦截
  private interceptor(instance: AxiosInstance){
    // 拦截请求
    instance.interceptors.request.use((config: AxiosRequestConfig)=>{
      config.baseURL = 'http://localhost:3000';
      return config;
    }, (error)=>{
      this.handleError(error.message);
      return Promise.reject(error);
    });

    // 拦截响应
    instance.interceptors.response.use((response: AxiosResponse)=>{
      //请求响应成功200，但是数据不一定是正确的
      const {data: {code, message}} = response;
      if(code === 0){
        //成功
      }else{
        // 失败
        //UI提示用户请求失败
        this.handleError(message);
      }
      return response;
    }, (error)=>{
      // 非200，比如400，500的错误
      this.handleError(error.message);
      return Promise.reject(error);
    })
  }


  private handleError(message: string){
    messageAlert.error(message, 0.5);
  }

}

export default HtttpRequest;

想要更多使用配置项可以查阅文档
axios 中文文档

来源：CSDN

作者：yuzhenliuMe

链接：https://blog.csdn.net/weixin_44691775/article/details/104426961

标签

config

response