REST API 返回的数据结构不一致该怎么处理？

清梅 Dev 提问于 2026-03-14 10:00:23 阅读 16

框架

我在调用后端的 REST API 时，发现有些接口成功返回的是 { data: {...} }，但有的直接返回对象本身，比如 { id: 1, name: 'xxx' }。这导致前端统一拦截器里不好处理，老是报错说 data 不存在。

我试过在每个请求后手动判断结构，但太麻烦了。有没有办法让后端统一格式？或者前端怎么优雅地兼容这两种情况？

api.get('/user/1').then(res => {
  // 有时候 res.data 有值，有时候 res 本身就是数据
  console.log(res.data?.name || res.name);
})

REST API 构架模式

我来解答赞 6 收藏

反馈

1 条解答

Mc.丽红 Lv1

这个问题太常见了，后端接口规范没做好，前端天天擦屁股。

最推荐：前端统一封装响应拦截器

在 axios 响应拦截器里直接把脏活干了，以后请求直接拿数据：

// 响应拦截器

axios.interceptors.response.use(

  response => {

    // 统一处理：如果有 data 属性且不为空，返回 data；否则返回整个响应

    const data = response.data;

    return data?.data !== undefined ? data.data : (data || response);

  },

  error => {

    return Promise.reject(error);

  }

);

用的时候直接拿，不用判断：

api.get('/user/1').then(user => {

  console.log(user.name); // 不管哪种格式都能用

});

如果不想改拦截器，封装个工具函数也行：

// 提取实际数据

const extractData = (res) => {

  return res?.data !== undefined ? res.data : res;

};



// 用法

api.get('/user/1').then(res => {

  const data = extractData(res);

  console.log(data.name);

});

长期方案：推动后端统一格式

最靠谱的还是让后端统一响应结构，比如都返回 { code: 200, data: {...}, message: '' } 这种格式，前后端都省心。你可以把前端这套方案甩给后端看，说服他们统一规范。

2026-03-14 10:02