Axios 库相关

目录

一、含义

二、作用

三、使用

1. 安装 Axios

2. 引入 Axio

3. 发送 GET 请求

4. 发送 POST 请求

5. 设置请求头：通过 headers 选项设置请求头

6. 取消请求：Axios 允许取消请求，可以使用 CancelToken 来实现

一、含义

Axios是一个 HTTP 客户端库。简化在浏览器端和 Node.js 环境中发送 HTTP 请求的过程。

二、作用

1. 发送 HTTP 请求：Axios 提供了简洁的 API，使得在代码中发送 HTTP 请求变得非常容易。无论是 GET、POST、PUT、DELETE 等各种 HTTP 请求方法，都可以通过 Axios 来发送。

2. 处理响应数据：Axios 能够接收服务器返回的响应数据，并将其以 Promise 对象的形式返回给调用方。这使得在接收到响应后能够方便地对数据进行处理、解析和展示。

3. 设置请求头：通过 Axios 可以轻松设置请求头，包括 Content-Type、Authorization 等，以满足不同的 HTTP 请求需求。

4. 处理错误：Axios 能够捕获请求过程中的错误，例如网络错误、超时等，并将错误信息返回给调用方，方便进行错误处理和错误提示。

5. 取消请求：Axios 支持取消 HTTP 请求的功能，这对于一些需要在用户操作中断时取消请求的情况非常有用，以避免不必要的网络请求。

6. 拦截器：Axios 提供了拦截器(interceptors)功能，允许在请求或响应被发送或接收之前对其进行拦截和处理。这可以用于添加公共请求头、处理错误等需求。

三、使用

1. 安装 Axios

首先，在项目中安装 Axios。

如果是在浏览器端使用，可以通过 CDN 引入，或者使用包管理器（如 npm 或 Yarn ）安装：

npm install axios

yarn add axios

2. 引入 Axios

// CommonJS
const axios = require('axios');

// ES6 Module
import axios from 'axios';

3. 发送 GET 请求

   axios.get('https://api.example.com/data')
     .then(response => {
       console.log(response.data); // 处理响应数据
     })
     .catch(error => {
       console.error('Error:', error); // 处理错误
     });

4. 发送 POST 请求

   axios.post('https://api.example.com/post', {
       data: {
         key: 'value'
       }
     })
     .then(response => {
       console.log(response.data); // 处理响应数据
     })
     .catch(error => {
       console.error('Error:', error); // 处理错误
     });

5. 设置请求头：通过 headers 选项设置请求头

   axios.get('https://api.example.com/data', {
       headers: {
         'Authorization': 'Bearer token'
       }
     })
     .then(response => {
       console.log(response.data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

6. 取消请求：Axios 允许取消请求，可以使用 CancelToken 来实现

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

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

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