简介
Vue.js 是一个开源的轻量级 JavaScript 框架，常被用于构建交互式的用户界面。对于一个 Web 应用程序，获取数据是非常重要的一部分，因此 Vue.js 提供了一个方便的 HTTP 客户端 axios，使得与后端 RESTful API 通信更加简单。
本文将详细介绍如何使用 Vue.js 中的 axios 模块来请求数据，并提供示例代码以供学习和参考。
安装和引入 axios
要使用 axios，首先需要在 Vue.js 的项目中安装它。可以使用 npm 安装 axios：
npm install axios --save
安装完成后，需要在 Vue.js 的组件或全局中引入 axios 模块：
import axios from 'axios'; Vue.prototype.$axios = axios;
这里我们将 axios 挂载到 Vue 的原型上，以确保在所有 Vue 实例中都可以使用它。
发起 GET 请求
使用 axios 发起 GET 请求非常简单，只需要调用 $axios.get() 方法并传入要请求的 URL，这里我们将其放在一个 Vue.js 的方法中：
-- -------------------- ---- -------
------ ------- -
-------- -
--------- -
-----------------------------------------------
-------------- -- -
---------------------------
--
------------ -- -
----------------------------
---
-
-
-这里我们调用了 $axios.get() 方法，该方法将返回一个 Promise，我们可以使用 .then() 处理成功的响应和 .catch() 处理失败的响应。在 .then() 中，我们可以访问响应对象的 data 属性来获取返回的数据，而在 .catch() 中，我们打印了响应对象的 error.response 属性来获取错误信息。
发起 POST 请求
要发送 POST 请求，使用 $axios.post() 方法，并将数据作为参数传递给它：
-- -------------------- ---- -------
------ ------- -
-------- -
---------- -
----- ---- - - ----- ------- ---- -- --
------------------------------------------------ -----
-------------- -- -
---------------------------
--
------------ -- -
----------------------------
---
-
-
-在这个例子中，我们创建了一个包含数据的对象，并将其作为 $axios.post() 方法的第二个参数传递。
发送请求头
如果需要在请求中添加自定义头部，只需要在请求中传递一个包含头部的对象：
-- -------------------- ---- -------
------ ------- -
-------- -
-------------------- -
----- ------- - - ---------------- ------- ------ --
----------------------------------------------- - ------- --
-------------- -- -
---------------------------
--
------------ -- -
----------------------------
---
-
-
-这里我们创建了一个包含要添加的自定义头部的对象，并将其作为 $axios.get() 方法的第二个参数传递。
将请求传递到 Store
在 Vue.js 应用程序中，通常使用 Vuex 来管理应用程序的状态。如果要将获取的数据保存到 Vuex 中，请在您的 Vue.js 组件中分发一个 action，并在您的 store 中编写相关 mutations。
例如，一个获取数据的 Vue.js 组件将派发一个名为 getData 的 action：
-- -------------------- ---- -------
------ ------- -
-------- -
--------- -
-------------------------------
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
-
-
-然后，在您的 Vuex store 中定义该 action 并分发请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -
-------- -
--------- ------ -- -
------ --- ----------------- ------- -- -
-----------------------------------------
-------------- -- -
----------------- ---------------
-----------------------
--
------------ -- -
--------------
---
---
-
--
---------- -
-------------- ----- -
---------- - -----
-
--
------ -
----- ----
-
-在这个例子中，我们使用 axios.get() 方法请求数据，然后调用 Vuex store 中的 setData mutation 将数据保存到 store 中。
总结
使用 Vue.js 和 axios 请求数据非常容易，只要安装和引入 axios 并调用 $axios.get() 或 $axios.post() 方法，就可以发送请求并处理响应。
本文提供了基本的 axios 操作示例，并示范了如何将获取的数据传递到 Vuex store 中。希望这些示例能够帮助大家更快地掌握 Vue.js 中的 axios。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455c954968c7c53b092b6c0