在前端开发中，我们经常需要向后端请求数据，获取或提交数据。Vue.js 是一个非常流行的前端框架，也提供了一些便捷的工具来帮助我们发送异步请求。其中，axios 是一个专门用来发送 Http 请求的第三方库。本文将介绍如何在 Vue.js 中使用 axios 发送异步请求。
1. 安装
使用 axios 首先需要在项目中安装该库。可以使用 npm 或 yarn 安装。
- -- --- -- --- ------- ----- ------ - -- ---- -- ---- --- -----
2. 基本用法
使用 axios 最常见的方式是发送 GET 请求，可以使用以下代码：
------ ----- ---- --------
----------------------
-------------- -- -
---------------------------
--
------------ -- -
-------------------
---在上面的代码中，我们首先导入了 axios，然后使用 axios.get() 方法发送了一个 GET 请求。该请求的 URL 是 /api/data，当请求成功时，在 then() 方法中会返回一个响应对象，其中的 data 属性包含了请求得到的数据。如果请求失败，则会在 catch() 方法中返回一个错误对象。使用 Promise 嵌套的方法，让我们可以在获取响应后进行数据操作。
3. 发送 POST 请求
除了 GET 请求外，我们还可以使用 axios 发送 POST 请求。POST 请求通常用于提交表单数据到后端。使用 axios 发送 POST 请求的代码示例如下：
------ ----- ---- --------
----- ---- - - ----- ----- ---- -- --
----------------------- -----
-------------- -- -
---------------------------
--
------------ -- -
-------------------
---在上面的代码中，我们使用了 axios.post() 方法来发送一个 POST 请求。该请求的 URL 是 /api/user，第二个参数是一个对象，包含了需要提交到后端的数据。
4. 请求拦截器和响应拦截器
在实际开发中，我们可能需要对请求或响应进行一些额外的操作，例如添加认证信息或处理错误信息。此时，可以使用 axios 的请求拦截器和响应拦截器。
请求拦截器可以在发送请求前对其进行一些处理。例如，我们可以在请求头中添加认证信息。使用 axios 添加请求拦截器的代码示例如下：
------ ----- ---- --------
-------------------------------
------ -- -
-- ----------
---------------------------- - ------- - - -----------
------ -------
--
----- -- -
-- ---------
------ ----------------------
-
--在上面的代码中，我们使用了 axios.interceptors.request.use() 方法来添加一个请求拦截器。在请求发送前，请求对象会经过该拦截器，并且拦截器函数必须返回 config 对象，通过在请求头中添加认证信息 token 进行拦截操作。
响应拦截器可以在获取到响应后对其进行一些处理。例如，我们可以统一处理错误信息。使用 axios 添加响应拦截器的代码示例如下：
------ ----- ---- --------
--------------------------------
-------- -- -
-- ---------
------ --------------
--
----- -- -
-- ---------
------ ----------------------
-
--在上面的代码中，我们使用了 axios.interceptors.response.use() 方法来添加一个响应拦截器。在获取到响应后，响应对象会经过该拦截器，并且拦截器函数必须返回响应数据 data。
5. 并发请求
有些情况下，我们需要同时发出多个请求，并在所有请求都完成后进行一些操作。例如，我们需要获取多个数据并绘制成图表。此时，可以使用 axios.all() 方法来同时发出多个请求。使用 axios.all() 方法的代码示例如下：
------ ----- ---- --------
----- -------- - ------------------------
----- -------- - ------------------------
----- -------- - ------------------------
-------------------- --------- ----------
------------------------------ ---------- ---------- -- -
-- ----------
--------------------------- --------------- ----------------
---
------------ -- -
-------------------
---6. 总结
本文介绍了如何在 Vue.js 中使用 axios 发送异步请求。在基本用法中，我们学习了如何使用 axios 发送 GET 请求和 POST 请求，并在请求成功或失败后进行相应的操作。在请求拦截器和响应拦截器中，我们学习了如何在请求或响应前加入额外的处理逻辑。在并发请求中，学习了如何同时发出多个请求。掌握了这些知识后，我们就可以使用 axios 更加方便地发送异步请求了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660d1979d10417a222d7fe2e