Question

使用Axios时，我们总是必须从响应中获取数据。像这样：

const response = await Axios.get('/url')
const data = response.data

有没有一种方法可以使Axios已经返回数据？像这样：

const data = await Axios.get('/url')

除了响应数据之外，我们从不使用其他任何东西。

Answer 1

添加响应拦截器

axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response.data; // do like this
}, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
});

我通常要做的是创建一个名为interceptors.js的js文件

import axios from 'axios';

export function registerInterceptors() {
  axios.interceptors.response.use(
    function (response) {
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      return response.data;
    },
    function (error) {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      return Promise.reject(error);
    }
  );
}

在./src/index.js

中

import { registerInterceptors } from './path/to/interceptors';
registerInterceptors();//this will register the interceptors.

为了最佳实践，请不要在每个地方都使用axios，以防万一将来要迁移到其他http提供程序时必须在其使用的任何地方进行更改。

围绕axios创建包装器，然后在您的应用中使用该包装器

例如：

创建一个名为http.js的js文件

const execute = ({url, method, params, data}) => {
  return axios({
    url,
    method,//GET or POST
    data,
    params,
  });
}

const get = (url, params) => {
  return execute({
    url, method: 'GET', params
  })
}

const post = (url, data) => {
  return execute({
    url, method: 'POST', data
  })
}

export default {
  get,
  post,
};

并像使用它

import http from './http';
....
http.get('url', {a:1, b:2})

所以现在您可以自定义整个应用程序，即使更改http提供程序也是如此简单。

Answer 2

您可以像这样使用ES6 Destructing：

const { data } = await Axios.get('/url');

因此您无需再编写另一行代码。

有没有一种方法可以使Axios返回数据作为默认响应？

2 个答案: