更改 axios 响应模式

Question

正如axios GitHub页面所说，axios请求的默认响应是：

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  // All header names are lower cased
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

问题：

我的 API 响应架构是：

{
  success: true,
  message: '',
  data: {}
}

所以每次我提出请求时，我都必须像这样处理响应：

(...).then((res) => res.data.data);

如何更改 axios 的响应模式以避免每次都执行.data.data？

Answer 1

您可以使用响应拦截器来更改承诺的值：

axios.interceptors.response.use(function (response) {
  return response.data.data
})

您只需执行一次，然后它将应用于通过默认 axios 实例发出的所有请求。如果您使用axios.create 创建自己的axios 实例，则可以采用类似的方法。

您可能还需要考虑如何处理错误情况，但方法大致相同。

文档：https://github.com/axios/axios#interceptors

更新：

如果您需要访问success、message 和data，您只需要这个：

axios.interceptors.response.use(function (response) {
  return response.data
})

当您编写 then 处理程序时，解构可能会很有用：

(...).then(({ data, success, message }) => {

});