ReactJS中使用axios发起请求无法获取200、400等响应状态码如何解决

核心原因 #

你当前在axios响应拦截器的错误回调中直接返回了error对象，这会将原本reject状态的Promise转为resolved状态，所以你在async函数中await拿到的结果可能是正常响应对象，也可能是Axios错误对象，错误状态码存放在错误对象的response.status字段中。

方案1：不修改现有拦截器，直接在调用侧判断类型 #

const postMyMethod = async () => {
    const result = await postMd(params)
    // 判断返回结果是否为错误对象
    if (result instanceof Error) {
        // 错误场景取response下的status
        if (result.response?.status === 400) {
            // 400对应逻辑
        }
    } else {
        // 正常响应直接取status
        if (result.status === 200) {
            // 200对应逻辑
        }
    }
};

方案2：调整拦截器逻辑（更规范，推荐使用） #

修改拦截器的错误回调，不再直接返回error，而是抛出错误让Promise保持reject状态，用try catch拆分正常/异常逻辑，代码可读性更高：

修改后的拦截器代码 #

axios.interceptors.response.use(
  function (response) {
    if (response && response.data && response.data.Code && response.data.Message) {
      message.error(response.data.Message);
      response.data = null;
    }
    return response;
  },
  function (error) {
    if (error.response && error.response.data && error.response.data.Code && error.response.data.Message) {
      message.error(error.response.data.Message);
    } else {
      message.error('Unknown error, please check your network ~');
    }
    // 改为抛出错误，保持Promise reject状态
    return Promise.reject(error);
  }
);

对应的接口调用代码 #

const postMyMethod = async () => {
    try {
        const response = await postMd(params);
        if (response.status === 200) {
            // 200对应逻辑
        }
    } catch (error: any) {
        if (error.response?.status === 400) {
            // 400对应逻辑
        }
    }
};

额外优化点 #

你封装的通用post方法末尾的.then((resp) => resp)是冗余代码，axios.post本身就返回Promise对象，可以直接简化：

export const post = (url: string, param: any) => {
   const CancelToken = axios.CancelToken; // axios取消请求
   const source = CancelToken.source();
   post.prototype.source = source;
   return axios.post(url, qs.stringify(param), { cancelToken: source.token });
};

内容的提问来源于stack exchange，提问作者mohan m