接口200但是不走then反而走catch

问题

遇到一个奇葩的bug，明明控制台-网络-接口显示200并返回了数据，但是却进入了 catch 中的 error 处理流程。

在全网包括ai都搜了很多解决办法：

• 返回数据格式不对
• 跨域
• 逻辑处理错误
  ……

但是检查后发现都不符合情况。

后面发现控制台总是报错：uncaught promise cancel。以为是没有 catch 捕获错误，添加了之后仍然有这个报错。

最终发现是：之前代码设置了取消重复操作的 get 请求。

// 记录get请求列表处理数据响应乱序引发的渲染混乱问题
export let getRequestList = new Map();

// request拦截器
service.interceptors.request.use(
  (config) => {
	// ……
    // get请求频繁触发获取列表，部分响应时间过长引发响应数据渲染覆盖的问题处理(特殊场景下允许同时多次调用，请求头需配置MultipleCalls为true)
    if (config.method === "get" && !config.headers.MultipleCalls) {
      const CancelToken = axios.CancelToken;
      config.cancelToken = new CancelToken(function executor(c) {
        let index = config.url.indexOf("?");
        let url;
        if (index !== -1) {
          url = config.url.slice(0, index);
        } else {
          url = config.url;
        }
        if (getRequestList.has(url)) {
          getRequestList.get(url)();
        }
        getRequestList.set(url, c);
      });
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

解决

给该接口的请求头配置 MultipleCalls 为 true，或者去掉重复调用请求，采取一次调用后传值避免重复请求。

这里采用了后者。

参考

new Map()

axios 取消请求