Fetch请求正常执行，Axios收到200响应却无法完成执行

我编写了一段发送GET HTTP请求的代码：使用Fetch时请求正常执行，调试断点能走到console.log语句；改用Axios后，浏览器网络工具显示请求已返回200 OK且包含预期数据，但代码始终无法走到console.log，请求好像一直未完成。

代码如下：

getParentAssetTemplateList = async (tenantId: string, signal?: AbortSignal): Promise<any> => {
    const headers = {
      tenantId: tenantId,
      ...this.defaultHeaders
    };

    const url = getEndpoint('/asset-templates/dropdown/flat');

    // const response = await fetch(url, {
    //   signal,
    //   headers
    // }).then((res) => res.json());

    // console.log('response: ', response);
    // return response;

    const response = await axios.get(url, {
      signal,
      headers
    });

    console.log('response: ', response.data);
    return response.data;
};

可能的原因及解决方案 #

• AbortSignal兼容性问题
  Axios从v0.22.0开始才支持标准的AbortSignal，如果你的Axios版本低于这个，会导致信号处理异常，请求被静默挂起。

  • 解决方案1：升级Axios到v0.22.0及以上版本。
  • 解决方案2：如果无法升级，改用Axios传统的CancelToken替代AbortSignal：

    import axios, { CancelToken } from 'axios';
    
    getParentAssetTemplateList = async (tenantId: string, signal?: AbortSignal): Promise<any> => {
        const headers = {
          tenantId: tenantId,
          ...this.defaultHeaders
        };
    
        const url = getEndpoint('/asset-templates/dropdown/flat');
        const source = CancelToken.source();
    
        // 绑定AbortSignal到CancelToken
        signal?.addEventListener('abort', () => source.cancel('Request aborted'));
    
        const response = await axios.get(url, {
          cancelToken: source.token,
          headers
        });
    
        console.log('response: ', response.data);
        return response.data;
    };
    

• 全局响应拦截器阻塞
  如果项目中设置了Axios全局响应拦截器，可能存在拦截器逻辑错误（比如异步操作未正确resolve、错误被静默吞掉），导致响应无法正常返回。

  • 解决方案：暂时移除全局响应拦截器测试，若恢复正常，检查拦截器代码，确保每个分支都正确返回响应或抛出错误。

• 请求头冲突或格式问题
  this.defaultHeaders中可能包含Axios不兼容的头字段，或者重复设置导致解析异常（比如GET请求中不必要的Content-Type）。

  • 解决方案：打印headers对象，对比Fetch和Axios发送的请求头差异，逐步移除默认头字段定位问题，调整后重新测试。

• 响应解析异常未被捕获
  虽然网络返回200，但Axios解析响应数据时可能出错（比如JSON格式错误），若未加try/catch，错误会被向上抛出但未被处理，导致看起来像是await卡住。

  • 解决方案：给Axios请求添加try/catch捕获错误，排查具体问题：

    getParentAssetTemplateList = async (tenantId: string, signal?: AbortSignal): Promise<any> => {
        const headers = {
          tenantId: tenantId,
          ...this.defaultHeaders
        };
    
        const url = getEndpoint('/asset-templates/dropdown/flat');
    
        try {
            const response = await axios.get(url, {
              signal,
              headers
            });
    
            console.log('response: ', response.data);
            return response.data;
        } catch (error) {
            console.error('Axios请求错误:', error);
            throw error;
        }
    };
    

内容的提问来源于stack exchange，提问作者Varun Gupta