需求分析

官方 axios 库实现了 axios.all、axios.spread 等方法，它们的用法如下：

  1. function getUserAccount() {
  2.   return axios.get('/user/12345');
  3. }
  5. function getUserPermissions() {
  6.   return axios.get('/user/12345/permissions');
  7. }
  9. axios.all([getUserAccount(), getUserPermissions()])
  10.   .then(axios.spread(function (acct, perms) {
  11.     // Both requests are now complete
  12.   }));

以上两个方法完全可由 Promose.all替代

官方 axios 库也通过 axios.Axios 对外暴露了 Axios 类（几乎没有使用场景，为了和官方api一致）
另外对于 axios 实例，官网还提供了 getUri 方法在不发送请求的前提下根据传入的配置返回一个 url，如下：

  1. const fakeConfig = {
  2.   baseURL: 'https://www.baidu.com/',
  3.   url: '/user/12345',
  4.   params: {
  5.     idClient: 1,
  6.     idTest: 2,
  7.     testString: 'thisIsATest'
  8.   }
  9. }
  10. console.log(axios.getUri(fakeConfig))
  11. // https://www.baidu.com/user/12345?idClient=1&idTest=2&testString=thisIsATest

代码实现

类型声明

  1. export interface Axios {
  2.   default: AxiosRequestConfig
  3.   interceptors: {
  4.     request: AxiosInterceptorManager<AxiosRequestConfig>
  5.     response: AxiosInterceptorManager<AxiosResponse>
  6.   }
  8.   request<T = any>(config: AxiosRequestConfig): AxiosPromise<T>
  10.   get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
  11.   head<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
  12.   delete<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
  13.   options<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
  15.   post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
  16.   put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
  17.   patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
  19.   getUri(config: AxiosRequestConfig): string
  20. }
  23. export interface AxiosStatic extends AxiosInstance {
  24.   create(config?: AxiosRequestConfig): AxiosInstance
  26.   CancelToken: CancelTokenStatic
  27.   Cancel: CancelStatic
  28.   isCancel: (val: any) => boolean
  29.   //  more 扩展静态方法
  30.   all<T>(promises: Array<T | Promise<T>>): Promise<T[]>
  31.   spread<T, R>(callback: (...args: T[]) => R): (arr: T[]) => R
  32.   Axios: AxiosClassStatic
  33. }
  35. export interface AxiosClassStatic {
  36.   new(config: AxiosRequestConfig): Axios
  37. }

代码实现

export default class Axios {
  // ...
  getUri(config: AxiosRequestConfig) {
    config = mergeConfig(this.default, config)

    return transformUrl(config)
  }
}

axios.all = function (promises) {
  return Promise.all(promises)
}
axios.spread = function (callback) {
  return function (args) {
    return callback.apply(null, args)
  }
}
axios.Axios = Axios