全能开发工程师必备：AxiosConfig详解

JTTY • 2024-10-04 00:16 • 编程

在前端开发中，经常需要向后端服务器发送请求。Axios作为一个常用的JavaScript HTTP客户端，可以帮助我们在浏览器和Node.js中更轻松地发送异步HTTP请求。

Axios的config参数是一个十分重要的对象，它决定了每个请求的细节。本文将从多个方面详细介绍Axios的config参数。

一、基本使用


import axios from 'axios';

axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  }
}).then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
});

以上就是最基本的Axios请求示例。url参数是必需的，表示请求的URL地址。method参数是可选的，默认为‘GET’，表示HTTP请求方法。data参数是请求的数据，如果是get请求，请使用params参数。

另外，Axios除了.then()和.catch()方法之外，还有.catch()和.finally()方法。catch()方法用来捕获错误，如果请求发生错误，它将会执行。finally()方法无论请求成功或失败，都会执行。

二、请求拦截器和响应拦截器

HttpClient的拦截器允许我们在发送请求之前和响应之后对数据进行修改。Axios使用拦截器来执行这一操作。

请求拦截器是在请求被发送之前执行的。我们可以使用请求拦截器来对请求进行一些修改或添加请求头信息。

响应拦截器是在响应被处理之前执行的。我们可以检查响应是否成功，以及对响应进行一些修改。


axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 对响应数据做点什么
  return response;
}, (error) => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

三、响应数据类型

Axios通过responseType配置来指定响应数据类型。下面是可用的响应类型：

arraybuffer 响应为一个ArrayBuffer
blob 响应为一个Blob对象
document 响应为一个Document对象
json 响应为一个JavaScript对象
text 响应为一个字符串
stream 响应为一个Stream对象（浏览器端）


axios({
  method: 'get',
  url: '/user/12345',
  responseType: 'stream'
})
  .then((response) => {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'));
  });

四、取消请求

有时候我们需要取消请求，例如用户在输入搜索关键字时，当输入的关键字改变，之前发送的搜索请求就不再需要了。

Axios提供了一个CancelToken API，用于取消请求。我们需要引入cancelToken，并将其传递给请求的config参数。


const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios({
  method: 'get',
  url: '/user/12345',
  cancelToken: source.token
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

五、多个并发请求

在某些情况下，我们需要同时发送多个请求。Axios提供了一个.all()方法，用于同时发送多个请求，并按请求完成的顺序返回结果数组。

另外，我们也可以使用.spread()方法将所有请求的结果拆分为单个参数。


function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 处理结果
  }));

以上就是Axios的config参数的详细介绍。只有深入理解Axios的config参数，我们才能写出更好的HTTP请求代码。

原创文章，作者：JTTY，如若转载，请注明出处：https://www.506064.com/n/136737.html