Axios 文档，如何全面了解和使用这个流行的 HTTP 客户端？

Axios 是一个基于 Promise 的网络请求库，可以用于浏览器和 Node.js，其使用简单，包尺寸小且提供了易于扩展的接口，以下是关于 Axios 文档的详细介绍：

**简介

Axios 是一个基于 promise 的网络请求库，适用于浏览器和 node.js，它支持从浏览器创建 XMLHttpRequests，从 node.js 创建 http 请求，并且支持 Promise API。

**安装方式

1、使用 npm 安装：$ npm install axios

2、使用 bower 安装：$ bower install axios

3、使用 yarn 安装：$ yarn add axios

4、使用 CDN：可以通过<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 或<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 引入 Axios。

**基本用例

1、GET 请求：

    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

2、POST 请求：

    axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

3、发送带有配置的请求：

    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

**Axios API

1、Axios 实例：通过axios.create() 方法可以创建一个自定义配置的 axios 实例。

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

2、请求配置：可以在请求中传递配置项，URL、请求方法、数据、超时等。

    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      },
      timeout: 1000
    });

3、响应结构：响应对象包含四个属性：data（响应体内容）、status（HTTP 状态码）、statusText（HTTP 状态消息）、headers（响应头）和config（请求配置）。

    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
      })
      .catch(function (error) {
        console.log(error);
      });

4、默认配置：可以通过设置全局默认配置来简化请求。

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = UX_TOKEN;

5、拦截器：Axios 允许在请求或响应被 then 或 catch 处理前拦截它们。

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });

6、错误处理：可以使用 try...catch 进行错误处理。

    try {
      const response = await axios('/user?ID=12345');
      console.log(response.data);
    } catch (error) {
      console.log('Error:', error);
    }

7、取消请求：可以使用CancelToken 来取消请求。

    const CancelToken = axios.CancelToken;
    let cancel;
    axios({
      method: 'get',
      url: '/user/12345',
      cancelToken: new CancelToken(function executor(c) {
        cancel = c;
      })
    });
    if (true) { // 更改为适当的条件以测试取消功能
      cancel();
    }

8、请求体编码：Axios 自动将请求数据序列化为 JSON，并将响应数据解析为 JSON，还可以手动设置请求体编码。

    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      },
      transformRequest: [function (data) {
        return data; // 不进行任何转换，直接发送原始数据
      }],
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} // 设置请求头为表单编码格式
    });

9、Multipart 实体请求：Axios 支持发送 Multipart 请求。

    axios({
      method: 'post',
      url: '/upload',
      data: new FormData(),
      headers: {'Content-Type': 'multipart/form-data'}
    });

10、其他：Axios 还支持查询参数序列化嵌套项处理、超时处理、取消请求、转换请求和响应数据、防御 XSRF、客户端防御 XSS、设置带宽限制、为符合规范的 FormData 和 Blob（包括 NodeBlo）提供支持等功能。

**常见问题与解答

1、如何设置全局默认配置？：可以通过设置axios.defaults 对象的属性来设置全局默认配置。axios.defaults.baseURL = 'https://api.example.com';。

2、如何添加和移除拦截器？：可以使用axios.interceptors.request.use 和axios.interceptors.response.use 添加拦截器，使用axios.interceptors.request.eject 和axios.interceptors.response.eject 移除拦截器。

3、如何处理并发请求？：可以使用 Promise.all() 方法来处理多个并发请求。

    Promise.all([axios('/user'), axios('/user/123')])
      .then(function (responses) {
        console.log(responses);
      })
      .catch(function (error) {
        console.log(error);
      });

以上内容就是解答有关“axios 文档”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。