1、修改index.ts

src/index.ts添加headers为空对象，去掉拦截器代码：
image.png

2、修改Axios.ts

修改src/axios/Axios.ts，添加默认配置：
image.png

image.png

image.png

完整代码：

  1. // src/axios/Axios.ts
  2. import { AxiosRequestConfig, AxiosResponse } from "./types";
  3. import AxiosInterceptorManager, {
  4.   Interceptor,
  5. } from "./AxiosInterceptorManager";
  6. import qs from "qs";
  7. import parseHeaders from "parse-headers";
  9. const defaults: AxiosRequestConfig = {
  10.   method: "get",
  11.   timeout: 0,
  12.   headers: {
  13.     common: {
  14.       accept: "application/json",
  15.     },
  16.   },
  17. };
  19. const getStyleMethods = ["get", "head", "delete", "options"]; // get风格请求
  20. const postStyleMethods = ["post", "put", "patch"]; // post风格请求
  22. getStyleMethods.forEach((method: string) => {
  23.   defaults.headers![method] = {};
  24. });
  26. postStyleMethods.forEach((method: string) => {
  27.   defaults.headers![method] = {
  28.     "content-type": "application/json", // 请求体格式
  29.   };
  30. });
  32. const allMethods = [...getStyleMethods, ...postStyleMethods];
  34. export default class Axios<T> {
  35.   public default: AxiosRequestConfig = defaults;
  36.   public interceptors = {
  37.     request: new AxiosInterceptorManager<AxiosRequestConfig>(),
  38.     response: new AxiosInterceptorManager<AxiosResponse<T>>(),
  39.   };
  40.   // T用来限制相应对象response里的data的类型
  41.   request(
  42.     config: AxiosRequestConfig
  43.   ): Promise<AxiosResponse<T> | AxiosRequestConfig> {
  44.     // 默认的header和定义的head合并
  45.     config.headers = Object.assign(this.default.headers, config.headers);
  46.     const chain: Array<
  47.       Interceptor<AxiosRequestConfig> | Interceptor<AxiosResponse<T>>
  48.     > = [
  49.       {
  50.         // 请求
  51.         onFulfilled: this.dispatchRequest,
  52.         // onRejected可以省略
  53.         onRejected: (error: any) => error,
  54.       },
  55.     ];
  56.     // 请求拦截器倒序
  57.     this.interceptors.request.interceptors.forEach(
  58.       (interceptor: Interceptor<AxiosRequestConfig> | null) => {
  59.         interceptor && chain.unshift(interceptor);
  60.       }
  61.     );
  62.     // 响应拦截器正序
  63.     this.interceptors.response.interceptors.forEach(
  64.       (interceptor: Interceptor<AxiosResponse<T>> | null) => {
  65.         interceptor && chain.push(interceptor);
  66.       }
  67.     );
  68.     let promise: any = Promise.resolve(config);
  69.     while (chain.length) {
  70.       const { onFulfilled, onRejected } = chain.shift()!;
  71.       promise = promise.then(onFulfilled, onRejected);
  72.     }
  73.     return promise;
  74.   }
  75.   // 定义一个开发请求的方法
  76.   dispatchRequest<T>(
  77.     config: AxiosRequestConfig
  78.   ): Promise<AxiosResponse<T> | AxiosRequestConfig> {
  79.     return new Promise<AxiosResponse<T>>(function (resolve, reject) {
  80.       let { method, url, params, headers, data, timeout } = config;
  81.       let request = new XMLHttpRequest();
  82.       // {name:'admin',password:'123'}转成?name=admin&password=123
  83.       if ((params && method === "get") || method === "GET") {
  84.         params = qs.stringify(params);
  85.         // 判断url有无参数
  86.         url += (url!.indexOf("?") === -1 ? "?" : "&") + params;
  87.       }
  88.       request.open(method!, url!, true);
  89.       // 返回json类型
  90.       request.responseType = "json";
  91.       request.onreadystatechange = function () {
  92.         if (request.readyState === 4 && request.status !== 0) {
  93.           if (request.status >= 200 && request.status < 300) {
  94.             let response: AxiosResponse<T> = {
  95.               data: request.response ? request.response : request.responseText,
  96.               status: request.status,
  97.               statusText: request.statusText,
  98.               headers: parseHeaders(request.getAllResponseHeaders()),
  99.               config,
  100.               request,
  101.             };
  102.             resolve(response);
  103.           } else {
  104.             // 错误状态码处理
  105.             reject(`error:request failed with status code ${request.status}`);
  106.           }
  107.         }
  108.       };
  109.       // 处理header
  110.       /**
  111.        * headers:{
  112.        *  common:{accept:'application/json'}
  113.        *  post:{'content-type':'application/json'}
  114.        * }
  115.        */
  116.       debugger
  117.       if (headers) {
  118.         for (let key in headers) {
  119.           // common表示所有方法都生效或者key是一个方法名
  120.           if (key === "common" || allMethods.includes(key)) {
  121.             if (key === "common" || key === config.method) {
  122.               for (let key2 in headers[key]) {
  123.                 request.setRequestHeader(key2, headers[key][key2]);
  124.               }
  125.             }
  126.           } else {
  127.             request.setRequestHeader(key, headers[key]);
  128.           }
  129.         }
  130.       }
  131.       // 处理data
  132.       let body: string | null = null;
  133.       if (data) {
  134.         body = JSON.stringify(data);
  135.       }
  136.       // 网络错误处理
  137.       request.onerror = function () {
  138.         reject("net:error");
  139.       };
  140.       // 超时设置错误
  141.       if (timeout) {
  142.         request.timeout = timeout;
  143.         request.ontimeout = function () {
  144.           reject(`err:timeout of ${timeout}ms exceeded`);
  145.         };
  146.       }
  147.       request.send(body);
  148.     });
  149.   }
  150. }

3、源代码

代码地址：https://gitee.com/linhexs/handwritten-axios/tree/4.merge-config/