Axios拦截器错误处理如何同时兼容Promise语法与await try/catch

两种错误抛出写法天然等价 #

在Axios响应拦截器的错误回调中，throw 错误对象 和 return Promise.reject(错误对象) 效果完全一致，天生同时支持Promise链式调用的.catch()捕获和await + try/catch捕获两种语法，不存在只能支持其中一种的情况。

你之前使用Promise.reject时react-query无法正常运行，大概率是漏写了return关键字：如果直接执行Promise.reject(error)而不返回，拦截器错误回调会默认返回undefined，相当于错误被静默吞掉，自然无法被后续逻辑捕获。

两种正确的拦截器写法 #

你当前的throw写法（完全没问题） #

API.instance.interceptors.response.use(
  response => response,
  error => {
    const modifiedError = error;
    let errorMessage = t('common:common-front-end-error') || 'Something wrong happened, please, try later';
    if (error.response?.data?.payload) {
      errorMessage = error.response.data.payload;
    }
    modifiedError.message = errorMessage;
    throw modifiedError;
  }
);

Promise.reject写法（注意加return） #

API.instance.interceptors.response.use(
  response => response,
  error => {
    let errorMessage = t('common:common-front-end-error') || 'Something wrong happened, please, try later';
    if (error.response?.data?.payload) {
      errorMessage = error.response.data.payload;
    }
    error.message = errorMessage;
    // 必须加return，否则错误会被吞
    return Promise.reject(error);
  }
);

React-query代码优化建议 #

你当前的请求函数中，catch块内重新创建Error实例的操作会丢失原错误的其他字段（比如HTTP状态码、请求配置、响应原始内容等），如果需要保留完整错误信息给react-query做后续处理，可以直接抛出捕获到的错误即可：

const fetchBlabla = currentPage => async (): Promise<Blabla> => {
  try {
    const api = API.getInstance();
    // 注意原路径参数拼接错误：第一个参数前缀应该是?而非&
    const response = await api.get<Blabla>(
      `/api/blabla?limit=20&offset=${(currentPage - 1) * 20}`
    );
    return response.data;
  } catch (err) {
    // 直接抛出原错误，保留完整错误信息
    throw err;
  }
};

内容的提问来源于stack exchange，提问作者Javier Guzmán