丰富 Axios 用法，配置默认参数、转换请求和响应数据

2023-11-06 15:03:42

在上一篇文章中，我们完成了 Axios 的拦截器和取消请求的功能，基本满足了大部分需求。然而，使用起来还是有些繁琐，因为它不支持默认参数的配置，导致每次请求都要添加这些参数。因此，本文将进一步扩展 Axios，使其支持默认配置的功能，同时也会介绍如何转换请求和响应数据。

1. 默认配置

Axios 允许我们为所有请求设置默认配置，包括 baseURL、timeout、headers 等。这可以极大地简化我们的代码，因为我们不必在每次请求中都指定这些参数。

axios.defaults.baseURL = 'https://example.com/api';
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

这样，我们就可以在每次请求中使用这些默认配置了。

2. 转换请求和响应数据

有时候，我们需要在发送请求之前或在收到响应之后对数据进行转换。Axios 提供了 transformRequest 和 transformResponse 两个选项来实现这个目的。

// 在发送请求之前转换数据
axios.defaults.transformRequest = [function (data) {
  return JSON.stringify(data);
}];

// 在收到响应之后转换数据
axios.defaults.transformResponse = [function (data) {
  return JSON.parse(data);
}];

这样，所有的请求都会自动将数据转换为 JSON 格式，所有的响应也会自动将数据解析成 JavaScript 对象。

3. 实例

有时候，我们需要创建多个 Axios 实例，每个实例都有自己的配置和拦截器。这可以让我们更方便地管理不同的 API。

const instance = axios.create({
  baseURL: 'https://example.com/api/v2',
  timeout: 20000,
  headers: {
    'X-Custom-Header': 'value'
  }
});

instance.get('/users').then((response) => {
  console.log(response.data);
});

4. 拦截器

拦截器允许我们在请求发送之前和响应收到之后执行一些操作。这可以用来做很多事情，比如添加额外的请求头、记录请求和响应、或者在请求失败时处理错误。

axios.interceptors.request.use((config) => {
  config.headers['X-Custom-Header'] = 'value';
  return config;
});

axios.interceptors.response.use((response) => {
  console.log(response.data);
  return response;
}, (error) => {
  console.log(error.response.data);
  return Promise.reject(error);
});

5. 取消请求

有时候，我们需要取消一个正在进行的请求。这可以在请求超时、用户取消请求或者其他情况下使用。

const source = axios.CancelToken.source();

axios.get('/users', {
  cancelToken: source.token
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.log(error.response.data);
  }
});

source.cancel();