Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境中发送 HTTP 请求。它是一个非常流行的网络请求库，也是 React 开发中常用的工具之一。本篇文章将详细介绍 Axios 的使用方法，并提供示例代码。
安装 Axios
首先，我们需要在项目中安装 Axios。可以使用 npm 或 yarn 进行安装：
npm install axios # 或者 yarn add axios
安装完成后，在需要使用 Axios 的组件中引入它：
import axios from 'axios';
发送 GET 请求
发送 GET 请求非常简单，只需要调用 axios.get() 方法即可。例如，我们需要发送一个 GET 请求获取一个 JSON 文件：
axios.get('https://example.com/data.json')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});在上面的代码中，我们使用 axios.get() 方法发送了一个 GET 请求，并在成功和失败时分别打印了响应和错误信息。
发送 POST 请求
发送 POST 请求也很简单，只需要调用 axios.post() 方法即可。例如，我们需要向服务器发送一个 POST 请求，提交一个表单数据：
-- -------------------- ---- -------
---------------------------------------- -
----- ----- -----
------ ------------------
--
-------------- -- -
----------------------
--
------------ -- -
---------------------
---在上面的代码中，我们使用 axios.post() 方法发送了一个 POST 请求，并传递了一个包含表单数据的 JavaScript 对象。
处理响应
Axios 的响应是一个包含许多信息的对象，包括响应状态、响应头和响应体等。我们可以通过响应对象的属性和方法来访问这些信息。例如，我们可以获取响应状态码和响应体的数据：
axios.get('https://example.com/data.json')
.then(response => {
console.log(response.status); // 200
console.log(response.data); // { name: 'John Doe', age: 30 }
})
.catch(error => {
console.error(error);
});在上面的代码中，我们使用 response.status 获取响应状态码，使用 response.data 获取响应体的数据。
处理错误
在使用 Axios 发送请求时，可能会遇到各种错误，例如网络错误、服务器错误和超时等。我们可以使用 catch() 方法来捕获这些错误。例如，我们可以在请求失败时打印错误信息：
axios.get('https://example.com/data.json')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error.message);
});在上面的代码中，我们使用 catch() 方法捕获请求失败时的错误，并打印错误信息。
配置 Axios
Axios 提供了许多配置选项，可以用来自定义请求和响应的行为。例如，我们可以设置请求超时时间和请求头：
-- -------------------- ---- -------
----- -------- - --------------
-------- -----
-------- -
--------------- ------------------
-
---
---------------------------------------------
-------------- -- -
---------------------------
--
------------ -- -
-----------------------------
---在上面的代码中，我们使用 axios.create() 方法创建了一个新的 Axios 实例，并设置了超时时间和请求头。然后，我们使用这个实例发送了一个 GET 请求。
结语
Axios 是一个非常强大的网络请求库，它提供了许多方便的方法和选项，可以大大简化我们的开发工作。在 React 开发中，我们经常需要使用 Axios 来发送网络请求，获取数据并更新 UI。希望本篇文章可以帮助大家更好地使用 Axios，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d9364fa941bf71340c10d2
