无法获取Axios请求错误状态：status为undefined的技术问询

问题 #

在React前端使用Axios调用后端API时，希望通过HTTP错误状态码给用户精准反馈，但捕获到的错误对象明明包含status字段，直接访问e.status却返回undefined。

请求函数代码 #

export const createBlog = async (token, workspaceId, userInputMetaData) => {
  log.info("Create blog.");
  const result = await axios.post(
    process.env.REACT_APP_API_URL + "/workspaces/" + workspaceId + "/blogs",
    userInputMetaData,
    {
      headers: { Authorization: `Bearer ${token}` }
    }
  );
  return result.data;
};

调用及错误捕获代码 #

const generateBlog = async () => {
    try {
      const token = await auth.getAccessTokenSilently({});
      const blog = await createBlog(token, workspaceStore.workspaces[0].id, userInputMetaData);
    } catch (e) {
      log.error(e.message)
      log.error(e.status)
      log.error(JSON.stringify(e))
    }
}

控制台输出 #

Request failed with status code 402

undefined

{  
"message": "Request failed with status code 402",  
"name": "AxiosError",  
"config": {    
  "transitional": {      
    "silentJSONParsing": true,     
     "forcedJSONParsing": true,      
     "clarifyTimeoutError": false    
  },    
  "transformRequest": [      null    ],    
  "transformResponse": [      null    ],    
  "timeout": 0,    
  "xsrfCookieName": "XSRF-TOKEN",    
  "xsrfHeaderName": "X-XSRF-TOKEN",    
  "maxContentLength": -1,    
  "maxBodyLength": -1,    
  "env": {      "FormData": null    },    
  "headers": {      
    "Accept": "application/json, text/plain, */*",      
    "Content-Type": 
    "application/json",      
    "Authorization": "Bearer ..."    
  },    
  "method": "post",    
  "url": "...",    
  "data": "..."  
},  
"code": "ERR_BAD_REQUEST",  
"status": 402
}

原因分析 #

Axios抛出的AxiosError对象中，status字段并不是直接挂载在错误对象本身，而是嵌套在e.response属性里。用JSON.stringify(e)输出时会序列化整个对象的可枚举属性，包括response中的status，所以能看到该字段，但直接访问e.status自然找不到。

需要注意：只有当请求已发送到服务器且服务器返回错误响应时，e.response才会存在；如果是请求未到达服务器就失败（比如网络错误），e.response会是undefined，需要额外判断这种情况。

正确访问status的方法 #

修改错误捕获逻辑，从e.response.status中获取状态码，同时处理无响应的异常情况：

const generateBlog = async () => {
    try {
      const token = await auth.getAccessTokenSilently({});
      const blog = await createBlog(token, workspaceStore.workspaces[0].id, userInputMetaData);
    } catch (e) {
      log.error(e.message);
      // 正确获取状态码
      if (e.response) {
        // 服务器返回了错误响应
        log.error(e.response.status);
        // 还可获取服务器返回的错误详情：e.response.data
      } else {
        // 请求未到达服务器，比如网络错误
        log.error("请求失败：网络错误或服务器无响应");
      }
    }
}

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