axios全配置详解，如何进行全局配置与优化？

Axios的全局配置

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 node.js 环境，在开发过程中，合理配置 Axios 可以提高代码的可维护性和可扩展性，本文将详细介绍 Axios 的全局配置方法，帮助开发者更好地使用 Axios。

Axios 全局配置方法

配置基本选项

Axios 提供了丰富的配置选项，以下是一些常用的基本选项：

以下是一个配置示例：

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

配置拦截器

拦截器可以用于在请求或响应被then或catch处理之前拦截它们,Axios 提供了请求拦截器和响应拦截器两种类型。

（1）请求拦截器

// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

（2）响应拦截器

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

配置响应式数据转换

Axios 允许你自定义响应数据的转换函数，以便在处理响应数据时进行自定义处理。

// 响应数据转换函数
axios.defaults.transformResponse = [(data) => {
  // 对响应数据进行处理
  return data;
}];

本文介绍了 Axios 的全局配置方法，包括基本选项配置、拦截器配置和响应式数据转换，通过合理配置 Axios，可以提高代码的可维护性和可扩展性，使你的项目更加健壮。

FAQs

为什么需要配置 Axios 全局选项？

答：配置 Axios 全局选项可以方便地在所有请求中统一设置一些公共参数，如基础 URL、请求头等，提高代码的可维护性和可扩展性。

如何在请求拦截器中添加 token？

答：在请求拦截器中，可以通过修改请求配置对象的 headers 属性来添加 token，以下是一个示例：

// 请求拦截器
axios.interceptors.request.use(config => {
  // 添加 token
  config.headers.Authorization = 'Bearer ' + token;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});