阅读axios源码, 实现自己的request请求库

2022-01-31

前两天在b站看到阅读axios源码的视频教程, 点进去看了一下感觉大受震撼, 然后axios框架已经很多年了, 但是他的思想却还是非常经典的. 值得我学习

axios 拦截器

axios 拦截器实现完全就是Promise.then的回调还是一个Promise, 然后then的第二个参数就是出错的回调, 然后Promise的链式调用, 就能把需要处理的拦截器挂在上去, 然后根据顺序来调用

const sucess = (i) => console.log('sucess!', i++)||i
const fail = (i) => console.log('fail', i--) || Promise.reject(i)
Promise.resolve(1)
  .then(sucess, fail)
  .then((i)=>Promise.reject(i), fail)
  .then(sucess, fail)
  .then(sucess, fail)

Output

1
2
3

sucess! 1
fail 2
fail 1

理解了上面的代码我们就很容易知道拦截器的实现原理了, 我们就可以创建一个拦截器的对象

type CallBack = (config: any) => any;

/** InterceptorManager */
export default class intercept {
  private handlers: { rejected?: CallBack; fulfilled: CallBack }[] = [];
  public use(fulfilled: CallBack, rejected?: CallBack) {
    this.handlers.push({ fulfilled, rejected });
    return this.handlers.length - 1;
  }
  eject(id: number) {
    if (this.handlers[id]) {
      this.handlers.splice(id, 1);
    }
  }
  forEach(fn: CallBack) {
    this.handlers.forEach(fn);
  }
}

拦截器不是有请求前和返回数据前嘛, 我们把请求前的方法放在数组前面, 接收前放后面, 然后循环使用Promise挂在上去, 按照这样的逻辑, 创建一个axios的class

export default class Request {
  interceptors: { [key in 'request' | 'response']: InterceptorManager };
  constructor(instanceConfig: Partial<RequestProps>) {
    this.defaults = { ...this.defaults, ...instanceConfig };
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager(),
    };
  }
  request<T, R = {}>(
    configOrUrl: string | RequestProps,
    opt?: RequestProps,
  ): Promise<API.RequestResult<T, R>> {
     const chain: (undefined | Function)[] = [dispatchRequest, undefined];
    this.interceptors.response.forEach(({ fulfilled, rejected }) => {
      chain.push(fulfilled, rejected);
    });
    this.interceptors.request.forEach(({ fulfilled, rejected }) => {
      chain.unshift(fulfilled, rejected);
    });
    let promise: Promise<any> = Promise.resolve(opt);
    while (chain.length) {
      // @ts-ignore
      promise = promise.then(chain.shift(), chain.shift());
    }
    return promise;
  }
}

这样就实现了一个简易的拦截器

工具类函数

我们导入axios的时候会发现我们可以直接使用axsio(opt), 也可以axios.get(url), 这是因为axios方法挂在了对象

const request = new Request();
export axios = request.request;
axios.creat = Request;
axios.get = request.get
/** ... */

axios 拦截器

工具类函数

axios的cancel