从Axios v0.27.2升级到v1.6.2的系列技术问题求助

原自定义Adapter实现（升级前） #

之前通过自定义Axios Adapter修改响应状态，代码如下：

import axios, { AxiosAdapter, AxiosError, AxiosResponse } from "axios";
import httpAdapter from "axios/lib/adapters/http";
import settle from "axios/lib/core/settle";

const customAdapter = (config) =>
  new Promise((resolve, reject) => {
    httpAdapter(config)
      .then(async response => {
        const jsonResponse = JSON.parse(response.data);
        if (jsonResponse.error) {
          if (
            jsonResponse.error.code === 12345 
          ) {
            response.status = 401;
          }  else {
            response.status = 503;
          }
        }

        settle(resolve, reject, response);
      })
      .catch(reject);
  });

const apiInstance = axios.create({
  baseURL:"/api"
});

apiInstance.defaults.adapter = customAdapter as AxiosAdapter;

export default apiInstance;

升级v1.6.2后的Adapter修改 #

升级后httpAdapter不再导出，替换为xhrAdapter，修改后的代码：

import axios from "axios";
import xhrAdapter from "axios/unsafe/adapters/xhr";
import settle from "axios/unsafe/core/settle";

const apiInstance = axios.create({
  adapter: config =>
    new Promise((resolve, reject) => {
      xhrAdapter(config)
        .then(async response => {
          const jsonResponse = JSON.parse(response.data);
          if (jsonResponse.error) {
            if (
              jsonResponse.error.code === 12345 
            ) {
              response.status = 401;
            } else {
              response.status = 503;
            }
          }
          settle(resolve, reject, response);
        })
        .catch(reject);
    }),
  baseURL: "/api"
});

参数序列化格式不符合预期 #

替换Adapter后，生成的参数格式不符合要求：

• 实际生成参数：

http://localhost:3000/api/store?input[request][method]=GetStoreType&input[request][args][0]=m%40d

• 理想参数格式：

http://localhost:3000/api/store?input=%7B%22request%22%3A%7B%22method%22%3A%22GetStoreType%22%2C%22args%22%3A%5B%22mr%40d

通过自定义paramsSerializer修复该问题，代码如下：

axios.defaults.paramsSerializer = params =>
  Object.keys(params)
    .filter(key => params[key] !== undefined)
    .map(key => {
      if (Object.prototype.toString.call(params[key]) === "[object Object]") {
        params[key] = JSON.stringify(params[key]);
      }
      if (Array.isArray(params[key])) {
        return params[key].map((v: any) => `${key}[]=${encodeURIComponent(v)}`).join("&");
      }
      return `${key}=${encodeURIComponent(params[key])}`;
    })
    .join("&");

Jest测试报错问题 #

修复序列化后，Jest测试无法找到axios/unsafe/adapters/xhr模块，尝试两种方案均失败：

1. 执行命令 react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"，仍提示找不到模块；
2. 在Jest配置中添加moduleNameMapper映射axios到cjs文件，出现栈溢出错误：

RangeError: Maximum call stack size exceeded
Exception in PromiseRejectCallback:
/home/project/node_modules/axios/dist/node/axios.cjs:3088
  return adapter(config).then(function onAdapterResolution(response) {
                         ^

RangeError: Maximum call stack size exceeded
Exception in PromiseRejectCallback:
node:internal/process/promises:107
function promiseRejectHandler(type, promise, reason) {
                             ^

寻求解决上述问题的可行方案。

内容的提问来源于stack exchange，提问作者Amit Ranjan