Axios 的使用

        Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它可以帮助你轻松地发送 HTTP 请求，并处理响应数据。Axios 支持多种请求方法，如 GET、POST、PUT、DELETE 等，并且提供了丰富的配置选项，使得它在处理 API 请求时非常灵活和强大。

一、安装 Axios

首先，需要在的项目中安装 Axios。可以使用 npm 或 yarn 来安装：

npm install axios

或者

yarn add axios

二、基本使用

安装完成后，你可以在你的代码中引入 Axios，并使用它来发送 HTTP 请求。

import axios from "axios";

2.1 发送 GET 请求

GET 请求用于从服务器获取数据。
以下是一个简单的 GET 请求示例：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {	//成功时
    console.log(response.data); // 输出响应数据
  })
  .catch(error => {	//失败时
    console.error(error); // 输出错误
  });

2.2 发送 POST 请求

POST 请求用于向服务器发送数据。
以下是一个简单的 POST 请求示例：

import axios from 'axios';

const data = {
  username: 'exampleUser',
  password: 'examplePassword'
};

axios.post('https://api.example.com/login', data)
  .then(response => {
    console.log(response.data); // 输出响应数据
  })
  .catch(error => {
    console.error(error); // 输出错误
  });

2.3 发送 PUT 请求

PUT 请求用于更新服务器上的数据。
以下是一个简单的 PUT 请求示例：

import axios from 'axios';

const data = {
  id: 1,
  name: 'Updated Name'
};

axios.put('https://api.example.com/update', data)
  .then(response => {
    console.log(response.data); // 输出响应数据
  })
  .catch(error => {
    console.error(error); // 输出错误
  });

2.4 发送 DELETE 请求

DELETE 请求用于从服务器删除数据。
以下是一个简单的 DELETE 请求示例：

import axios from 'axios';

const id = 1;

axios.delete(`https://api.example.com/delete/${id}`)
  .then(response => {
    console.log(response.data); // 输出响应数据
  })
  .catch(error => {
    console.error(error); // 输出错误
  });

三、配置 Axios

Axios 提供了丰富的配置选项，允许你自定义请求的行为。以下是一些常用的配置选项：

baseURL：设置请求的基础 URL。
headers：设置请求头。
timeout：设置请求超时时间。
params：设置 GET 请求的查询参数。
data：设置 POST、PUT、DELETE 请求的请求体数据。

以下是一个配置示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  },
  timeout: 5000 // 5秒超时
});

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

四、拦截器

Axios 还提供了拦截器功能，允许你在请求或响应被处理之前拦截它们，并进行一些自定义处理。

4.1 请求拦截器

请求拦截器常用于对发送请求的数据进行修改。

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

4.2 响应拦截器

响应拦截器常用于对返回的数据和状态码进行处理。

axios.instance.interceptors.response.use(function (response) {
	// 响应成功时执行
  if(response.status === 200){
    return response.data;
  } else {
    console.error("请求错误");
    console.error(response);
  }
  return response;
}, function (error) {
	// 响应错误时执行
  return Promise.reject(error);
});

五、并发请求

Axios 还支持并发请求，允许你同时发送多个请求，并在所有请求完成后统一处理响应。

import axios from 'axios';

axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
]).then(axios.spread((response1, response2) => {
	//请求成功后执行
  console.log(response1.data);
  console.log(response2.data);
})).catch(error => {
	//请求失败后执行
  console.error(error);
});

总结

        Axios 是一个功能强大且易于使用的 HTTP 客户端，适用于浏览器和 Node.js 环境。通过 Axios，可以轻松地发送各种类型的 HTTP 请求，并处理响应数据。Axios 还提供了丰富的配置选项和拦截器功能，使得它在处理复杂的 API 请求时非常灵活和高效。