在 Web 开发中，前后端分离的开发模式越来越受到开发者的喜欢。Vue.js 作为一种流行的前端框架，其与后端的交互也需要使用一些工具来实现。Axios 就是当前比较常用的一种工具，他能够帮助 Vue.js 实现数据的快速交互、管理等功能。本文将介绍如何在 Vue.js 中使用 Axios ，并且提供示例代码。
简介
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中的 HTTP 请求。Axios 支持在浏览器和 Node.js 中使用，并且该库使用了 XMLHttpRequeset 对象进行实现。另外，Axios 具有以下特点：
- 支持 Promise API
- 支持拦截器（Interceptor）
- 可以自动转换 JSON 数据
同时， Axios 还具有以下优势：
- 清晰地定义了 API
- 出色的浏览器支持
- 支持请求拦截器、响应拦截器等功能
- 自动转码处理、取消请求等
- 功能强大，扩展性强
安装
在 Vue.js 中使用 Axios，需要首先进行安装。您可以通过以下命令进行安装：
npm install axios --save
实现 HTTP 请求
当 Axios 安装完毕之后，您可以在 Vue.js 的组件中进行接口请求。如下是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- -------
------------------- - --------------
-------- ----------------------------
--
------ ------- -
----- ---------------
-------- -
------- -- -
-------------------------
--------- -- -
---------------------
--
-
-
-在上面的例子中，我们将 Axios 添加到 Vue.prototype.$http 中。在方法中，您可以使用 this.$http.get 来进行 GET 请求。当请求成功时，将在控制台中打印用户数据。
如果需要进行 POST 请求，只需要使用 this.$http.post，如下所示：
this.$http.post('/user', { ... })使用拦截器
Axios 支持请求拦截器和响应拦截器，可以对请求和响应进行修改。在 Vue.js 中，我们可以通过定义 getters 来进行拦截器的定义。
例如，在以下示例中，我们可以通过拦截请求，在头部添加 Authorization 字段。
-- -------------------- ---- -------
----- ------------- - --------------
-------- ----------------------------
--
---------------------------------------
------ -- -
----- ----------- - ---------------------------------
-- ------------- -
---------------------------- - ------- ---------------
-
------ ------
--
----- -- -
------ ---------------------
-
-在上面的示例中，使用 axios.create 来创建一个 Axios 实例，并添加拦截器。其中， request.use 用于拦截请求， response.use 用于拦截响应。 在请求拦截器中，首先获取 store.getters['auth/accessToken']，再将该值添加到请求头中。
类似地，在响应拦截器中，可以携带用户响应数据，进而对用户进行相应的操作请求。
-- -------------------- ---- -------
----------------------------------------
-------- -- -
----- - ----- - ------------ - - - --------
-- -------------- -
-------------------------------------- -------------
-
------ --------
--
----- -- -
-- ---------------------- --- ---- -
-----------------------------
-
------ ---------------------
-
-总结
Axios 是一个强大的 HTTP 客户端，用于快速地对后端进行请求。HTTP 请求是在 Web 开发中必不可少的一部分，它可以帮助我们从后端获取数据，这样我们就可以为前端提供更加优秀的服务。通过本文的讲解，我们已经了解了在 Vue.js 中如何使用 Axios 进行开发，同时也学会了如何使用拦截器来修改我们的请求和响应。这些知识点是必不可少的，在实际开发中可以提高我们的开发效率，帮助我们更好地完成业务操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b23d3448841e9894e84639