---

---

0、起因

创建一个实例：

const service = axios.create({
  baseURL: "/api",
  timeout: 3e3,
  withCredentials: true,
  headers:{
    "Content-Type": "application/json"
  }
})

简单封装：

export default{
  Post(url:string, params = {} ) {
      return new Promise((resolve, reject) => {
          service.post(url, params ).then(res => {
              resolve(res.data);
          }).catch(err => {
              reject(err)
          })
      })
  },
}

封装时放开 config 配置：

export default{
  Post(url:string, params = {}, config: AxiosRequestConfig<any> = {}) {
      return new Promise((resolve, reject) => {
          service.post(url, params, config).then(res => {
              resolve(res.data);
          }).catch(err => {
              reject(err)
          })
      })
  },
}

源码里定义的几个接口：
主要信息：可以传一个 config 对象

  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
  get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  delete<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  head<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  options<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  put<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;

  像往常一样机械封装 axios实例，封装 get、post、put、delete方法，之前都是秉持着“能用就行”的原则，力图简单快速，直接砍掉了方法自带的config参数，仅留下了 url、data 两个，其他配置参数（baseURL、headers…）开始就统一默认配置好。
  但是随着不同需求的出现，问题也暴露了：请求不够灵活，没法单独定制 header 等信息。于是考虑封装时开放 config 参数，但是并不是每次都需要定制，大部分情况下默认就行。于是乎就纠结默认值的问题，之前没传的时候，底层获取到的是 undefined，那么默认值 undefined 肯定没问题。问题在于，如果传入了 config ，那他是会替换掉实例的配置，还是合并？

1、冷静分析

  一想肯定是合并，但是由于之前封装的时候失误，没有用实例而是直接用 axios 封装，导致出现 “初始配置丢失” 的假象，就打开源码一探究性（主要是我也很好奇他的很多东西，正好这个机会去䁖一䁖🤣）。
  顺着源码，一路找到了 Axios 身上的 request ，然后还是自代码里找到了答案，实例自身会将初始配置对象存一份在 defaults 上，request 接到 config 后，会有一步合并的操作，也就是 mergeCofig。源码的后边，也是用合并后的 config 发起请求，返回对应的 promise 对象。

axios/lib/core/Axios.js

class Axios {
  constructor(instanceConfig) {
  	// ** 看这里
    this.defaults = instanceConfig;
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager()
    };
  }
  request(configOrUrl, config) {
    if (typeof configOrUrl === 'string') {
      config = config || {};
      config.url = configOrUrl;
    } else {
      config = configOrUrl || {};
    }
	// ** 看这里
    config = mergeConfig(this.defaults, config);
    // 省略好几个字。。。
    }
    
  // 省略好多源码....

   // ** 看这里
   let newConfig = config;

    i = 0;

    while (i < len) {
      const onFulfilled = requestInterceptorChain[i++];
      const onRejected = requestInterceptorChain[i++];
      try {
        newConfig = onFulfilled(newConfig);
      } catch (error) {
        onRejected.call(this, error);
        break;
      }
    }

    try {
      // ** 看这里
      promise = dispatchRequest.call(this, newConfig);
    } catch (error) {
      return Promise.reject(error);
    }
    // 省略好多源码....
}

2、一个简单粗糙但是能用的封装

请求、响应拦截器可以更精致一点🤣

import axios, { AxiosRequestConfig } from "axios"

const service = axios.create({
  baseURL: "/api",
  timeout: 3e3,
  withCredentials: true,
  headers:{
    "Content-Type": "application/json"
  }
})

service.interceptors.request.use(config =>{
  config.headers["token"] = "dont forget to carry the token"
  return config
}, error=>{
  
})

service.interceptors.response.use((res)=>{
  // 错误处理 token过期等
  return res.data
}, error=>{

})

export {service}

export default {
  Get(url: string, config: AxiosRequestConfig<any> = {}) {
    return new Promise((resolve, reject) => {
      service.get(url, config).then(res => {
          resolve(res.data)
      }).catch(err => {
          reject(err)
      })
    })
  },
  Post(url:string, params = {}, config: AxiosRequestConfig<any> = {}) {
      return new Promise((resolve, reject) => {
          service.post(url, params, config).then(res => {
              resolve(res.data);
          }).catch(err => {
              reject(err)
          })
      })
  },
  Put(url:string, params = {}, config: AxiosRequestConfig<any> = {}) {
    return new Promise((resolve, reject) => {
        service.put(url, params, config).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err)
        })
    })
  },
  Delete(url:string, config: AxiosRequestConfig<any> = {}) {
    return new Promise((resolve, reject) => {
        service.delete(url, config).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err)
        })
    })
  },

}