在前端开发中，我们经常需要向服务器发起 HTTP 请求获取数据，这时候就需要使用到一个 HTTP 请求库。Axios 是一个流行的、基于 Promise 的 HTTP 请求库，可以用于浏览器和 Node.js 环境。在 Vue.js 2.x 中使用 Axios 发起 HTTP 请求也非常方便，本文将详细介绍 Axios 在 Vue.js 中的使用方法。
安装和导入 Axios
首先需要安装 Axios，可以使用 npm 或 yarn 安装：
npm install axios --save # 或 yarn add axios
安装完成后，在需要使用 Axios 的地方导入：
import axios from 'axios';
发起 GET 请求
在 Vue.js 中使用 Axios 发起 GET 请求非常简单，只需要使用 axios.get 方法即可。axios.get 方法会返回一个 Promise，当请求成功时会调用 then 回调函数并传递响应数据，当请求失败时会调用 catch 回调函数并传递错误信息。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------ --
--
--
--------- -
-----------------------
-------------- -- -
---------- - --------------
--
------------ -- -
-------------------
---
-
-发送的请求是 /api/users，在成功的回调函数中将响应数据保存在组件的 users 变量中。
发起 POST 请求
使用 Axios 发起 POST 请求也非常简单，只需要使用 axios.post 方法即可。axios.post 方法也会返回一个 Promise，当请求成功时会调用 then 回调函数并传递响应数据，当请求失败时会调用 catch 回调函数并传递错误信息。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
----- -
----- ---
---- --
-
--
--
-------- -
------------ -
------------------------ -
----- ---------------
---- -------------
--
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
-
-
-发送的请求是 /api/users，请求体是一个包含 name 和 age 字段的对象。
发起 PUT/DELETE 请求
Axios 也支持发起 PUT 和 DELETE 请求，分别使用 axios.put 和 axios.delete 方法。和 GET/POST 请求类似，这两个方法也会返回一个 Promise，成功回调函数和失败回调函数的逻辑也一样。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------- -
-------- -
-------------- ----- ---- -
----------------------------- -
----- -----
---- ---
--
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
--
-------------- -
--------------------------------
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
-
-
-设置请求头
有时候需要设置请求头，比如在发送授权请求时需要设置 Authorization 头。使用 Axios 设置请求头也非常简单，只需要在请求的配置对象中添加 headers 属性即可。
下面是一个示例代码：
axios.get('/api/users', {
headers: {
'Authorization': 'Bearer token'
}
})使用拦截器
Axios 支持使用拦截器，在请求发送之前和响应返回之后可以进行一些操作，比如设置请求头、添加 loading 等待动画等。拦截器可以在全局和局部使用。
下面是一个示例代码：
-- -------------------- ---- -------
-- -------
------------------------------------- -- -
-- -----------
---------------------------- - ------- -------
------ -------
-- ----- -- -
-- ------
------ ----------------------
---
------ ------- -
--------- -
-----------------------
-------------- -- -
-- ------
--
------------ -- -
-- ----
---
-
-使用 axios.interceptors.request.use 方法添加全局拦截器，可以在请求被发送之前对请求进行一些定制化操作。在请求成功或失败之后，可以使用 response 和 error 对象进行操作。
总结
Axios 不仅功能丰富，而且非常容易使用，可以极大地提高前端开发的效率和开发体验。本文介绍了 Axios 在 Vue.js 中的使用方法，今后在进行 Vue.js 开发时，可以使用 Axios 来方便地发起 HTTP 请求，这对于打造一个优秀的前端项目非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f2f197d4982a6eb0425b4