axios封装时对config参数的一点思考_设置axios requestconfig 数据类型

---

---

0、起因

创建一个实例：

const service = axios.create({
  baseURL: "/api",
  timeout: 3e3,
  withCredentials: true,
  headers:{
    "Content-Type": "application/json"
  }
})
1
2
3
4
5
6
7
8

简单封装：

export default{
  Post(url:string, params = {} ) {
      return new Promise((resolve, reject) => {
          service.post(url, params ).then(res => {
              resolve(res.data);
          }).catch(err => {
              reject(err)
          })
      })
  },
}
1
2
3
4
5
6
7
8
9
10
11

封装时放开 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)
          })
      })
  },
}
1
2
3
4
5
6
7
8
9
10
11

源码里定义的几个接口：
主要信息：可以传一个 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>;
1
2
3
4
5
6
7

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

1、冷静分析

  一想肯定是合并，但是由于之前封装的时候失误，没有用实例而是直接用 axios 封装，导致出现 “初始配置丢失” 的假象，就打开源码一探究性（主要是我也很好奇他的很多东西，正好这个机会去䁖一䁖