Vue.js 是现代化的前端框架之一，使用它可以更加高效地进行前端开发。为了获取数据，我们通常需要向后端服务器发送HTTP请求，而 axios 是前端常用的用于发送HTTP请求的库之一。本文将介绍如何在 Vue.js 中使用 axios 进行HTTP请求。
安装 axios
使用前需要先安装 axios 。在命令行中输入以下命令：
npm install axios
安装完成后，在Vue组件和其他JavaScript文件中可以通过引用axios来使用它。
发送 GET 请求
在Vue组件中，发送GET请求的代码如下所示：
axios.get("/api/test")
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});在代码中， /api/test 为被请求的API的路径。Axios.get() 方法必须在.then() 来处理成功的响应，.catch() 来处理失败的响应。
发送 POST 请求
发送 POST 请求与发送 GET 请求类似，只需使用axios.post()。以下是一个示例：
axios.post("/api/user", {name: "user1", age: 20})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});在代码中， /api/user 是要被请求的API路径，{ name: "user1", age: 20 } 是要发送的数据。
发送并发请求
Axios可以同时发送多个请求，使用axios.all()方法即可实现。以下是一个示例:
axios.all([
axios.get('/api/user'),
axios.get('/api/post')
])
.then(axios.spread((userRes, postRes) => {
console.log(userRes.data);
console.log(postRes.data);
});在上述代码示例中，axios.all()方法以数组的形式传递多个请求，.then()方法等待所有请求都完成后返回。然后将 axios.spread() 用于展开每个响应并处理响应的数据。
设置 axios 实例
Axios实例可以配置全局的请求和响应参数，这可以通过创建一个axios实例来实现。以下是一个示例：
-- -------------------- ---- -------
----- -------- - --------------
-------- --------------------------
-------- -----
-------- ------------------- ---------
---
---------------------
-------------- -- -
----------------------
--
------------ -- -
---------------------
---在示例代码中，创建了一个名为 instance 的 Axios 实例。 baseURL选项设置请求url的公共基本URL。timeout设置请求超时时间。headers选项设置请求头。此实例仅发送GET请求，其他类型的请求也是支持的。
设置拦截器
Axios拦截器可以处理请求和响应的前后，可以用于全局请求错误处理、请求进度条、统一处理JWT token等。以下是一个示例：
-- -------------------- ---- ------- --------------------------------------- -------- - -- ---------- ----- ------ ------- -- -------- ------- - ------ ---------------------- --- ---------------------------------------- ---------- - -- ---------- ------ --------- -- -------- ------- - ------ ---------------------- ---
在示例代码中，设置request的拦截器返回通过config修改请求参数，例如设置JWT token。在设置response的拦截器中可以对响应数据做出处理。
总结
上述示例提供了使用Axios发送HTTP请求的详细说明，包括axios的基本用法、 发送并发请求、设置axios实例、设置拦截器等。用它处理HTTP请求可以在Vue.js中进行更高效的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a3536badd4f0e0ffb72b1a