Axios API调用404错误：如何获取响应数据中的状态与消息？

核心问题定位 #

你遇到的问题大概率是没有准确匹配后端返回的响应结构，或者没正确处理Axios错误对象的层级。Axios在捕获4xx/5xx错误时，服务器返回的所有数据都会被放在error.response对象里，但你需要先明确这个对象的具体结构。

解决步骤 #

1. 先打印完整错误结构，确认数据位置

在catch块里先打印整个error对象，搞清楚后端返回的data到底是什么结构：

catch (error) {
  console.log('完整错误信息:', error);
  console.log('响应数据:', error?.response?.data);
}

对照Postman里的payload：

• 如果Postman返回的是直接平铺的结构：

  {
    "status": "fail",
    "message": "该记录不存在或无效"
  }
  

  你应该直接访问error.response.data.message；
• 如果Postman里的payload嵌套在data字段里：

  {
    "data": {
      "status": "fail",
      "message": "该记录不存在或无效"
    }
  }
  

  才需要用error.response.data.data.message。

2. 规范错误处理逻辑

给你一个完整的Axios请求错误处理示例，覆盖所有可能的错误场景：

import { useEffect, useState } from 'react';
import axios from 'axios';

function YourComponent() {
  const [errorStatus, setErrorStatus] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    const fetchRecord = async () => {
      try {
        const res = await axios.get('/api/your-record-endpoint');
        // 处理正常响应
      } catch (error) {
        // 1. 服务器返回了4xx/5xx响应（有response）
        if (error.response) {
          const { data } = error.response;
          // 根据实际结构调整下面的访问路径
          setErrorStatus(data.status);
          setErrorMessage(data.message);
        } 
        // 2. 请求发出去但没收到响应（网络错误）
        else if (error.request) {
          setErrorMessage('网络连接失败，请检查网络后重试');
        } 
        // 3. 请求配置出错（比如参数错误）
        else {
          setErrorMessage(`请求配置错误: ${error.message}`);
        }
      }
    };

    fetchRecord();
  }, []);

  return (
    <div>
      {errorMessage && <p className="error">{errorStatus}: {errorMessage}</p>}
    </div>
  );
}

3. 排查特殊配置问题

如果还是拿不到数据，检查以下两点：

• 有没有给Axios设置transformResponse，导致响应数据被额外处理；
• 后端是否在返回404时正确设置了Content-Type: application/json，否则Axios可能无法解析成JSON对象，error.response.data会是字符串，需要手动JSON.parse。

额外说明 #

虽然项目要求服务端处理，但你这里的需求是从服务端返回的错误响应里拿展示用的信息，属于前端正常的错误渲染逻辑，和服务端处理业务逻辑不冲突。

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