安装 Axios
在开始使用 Axios 之前，首先需要将其安装到你的项目中。Axios 可以通过 npm 或者 yarn 来安装。这里以 npm 为例：
npm install axios
或者如果你使用的是 yarn：
yarn add axios
发送基本请求
Axios 提供了多种方法来发送 HTTP 请求。最常用的有 get, post, put, 和 delete 方法。这些方法都返回一个 Promise 对象，这意味着你可以使用 .then() 和 .catch() 方法来处理异步操作。
GET 请求示例
下面是一个使用 Axios 发送 GET 请求的简单例子：
-- -------------------- ---- -------
------ ----- ---- --------
-----------------------------------------
-------------- -- -
---------------------------
--
------------ -- -
-------------------- -------- ------- -------
---POST 请求示例
POST 请求用于向服务器发送数据。下面是使用 Axios 发送 POST 请求的一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -
----- -----
------ ----------------------
--
------------------------------------------ ---------
-------------- -- -
----------------- ------- --------------- ---------------
--
------------ -- -
-------------------- -------- ------- -------
---处理请求配置
Axios 允许你为每个请求提供额外的配置选项。例如，你可以设置请求头、超时时间、以及验证 SSL 证书等。
设置请求头
如果你想在请求中添加特定的请求头，可以通过配置对象来实现：
-- -------------------- ---- -------
----------------------------------------- -
-------- -
---------------- ------- -----------------
--------------- ------------------
-
--
-------------- -- -
---------------------------
--
------------ -- -
-------------------- -------- ------- -------
---设置超时时间
你也可以为请求设置一个超时时间，如果请求在这个时间内没有完成，它将被自动取消：
-- -------------------- ---- -------
----------------------------------------- -
-------- ---- -- ----- - -
--
-------------- -- -
---------------------------
--
------------ -- -
-- ----------- --- --------------- -
----------------------
- ---- -
---------------------- -------
-
---处理响应数据
Axios 的响应对象包含了一些有用的属性，比如 data, status, statusText, headers, 和 config。这些属性可以帮助你更好地处理和理解服务器返回的数据。
解析响应数据
在处理响应时，通常需要访问 response.data 来获取实际的数据内容：
axios.get('https://api.example.com/data')
.then(response => {
const responseData = response.data;
console.log('接收到的数据:', responseData);
})
.catch(error => {
console.error('请求失败:', error);
});错误处理
Axios 提供了强大的错误处理功能，允许你捕获并处理各种类型的错误。常见的错误类型包括网络错误、超时错误、以及请求错误。
捕捉网络错误
在网络请求过程中，可能会遇到一些网络错误，比如 DNS 查找失败或连接被拒绝。这些错误可以通过检查 error.code 来识别：
-- -------------------- ---- -------
-----------------------------------------
------------ -- -
-- ----------- --- ------------ -
------------------ -------
- ---- -- ----------- --- --------------- -
-----------------------
- ---- -
---------------------- -------
-
---使用拦截器
Axios 提供了请求和响应拦截器，允许你在请求发送之前或响应到达之后修改它们。这对于日志记录、身份验证令牌处理、或任何需要在请求/响应周期中执行的操作非常有用。
添加请求拦截器
-- -------------------- ---- ------- -- ------- ------------------------------------- -- - -- ----------- ---------------------------- - ------- ----------------- ------ ------- -- ----- -- - -- --------- ------ ---------------------- ---
添加响应拦截器
-- -------------------- ---- ------- -- ------- ---------------------------------------- -- - -- --------- -------------------- --------------- ------ --------- -- ----- -- - -- --------- ---------------------- ------- ------ ---------------------- ---
总结
以上就是使用 Axios 发送 HTTP 请求的一些基本示例和高级用法。通过这些示例，你应该能够开始构建自己的应用，并根据需要调整和扩展功能。希望这个教程对你有所帮助！