Vue.js 是一种流行的前端框架，能够帮助开发者更高效地构建复杂的应用程序。在许多应用程序中，从服务器端获取数据是至关重要的。本文将介绍在 Vue.js 中使用 AJAX 请求数据的方法，包括如何发送 GET 和 POST 请求以及如何处理响应和错误。
1. 发送 GET 请求
要发送 GET 请求，你可以使用 Vue.js 的 $http 对象，这是一个基于 XMLHttpRequest API 的封装。要使用 $http，你需要先通过 Vue.js 工具包 安装 @vue/http。
安装完成后，在 Vue.js 组件中，你可以使用 $http 发送 GET 请求，并在回调函数中处理响应：
----------
-----
----
---- ----------- ---
--- ----------- -- ------ ----------------- --------- -------
-----
------
-----------
--------
------ - --------------- - ---- -----
------ - -------- - ---- ------------
------ - ------- - ---- -----------
------ ------- -----------------
----- -- -
-- --------
----- ----- - ----------
-- -- ---- --
----- ---- - ---------
-- -- --- --
---------------------- -
------- - ------------ ----------------------- -
---------------- -- -
-- ----
---------- - -------------
-------------- -- -
-- ----
-----------------------------
--
-- -----
------ -
------ --
-
-
--
---------在上面的代码中，useHttp 函数创建了一个 HTTP 客户端实例，然后使用 get 方法发送 GET 请求，并将响应中的数据赋值给 items 数组。如果发生错误，将在控制台中输出错误日志。
2. 发送 POST 请求
要发送 POST 请求，你可以使用 $http 对象的 post 方法，并指定要发送的数据：
----------
-----
----- -----------------------------
------ ----------- -------------------
------- -------------------------
-------
------
-----------
--------
------ - --------------- - ---- -----
------ - ------- - ---- -----------
------ ------- -----------------
----- -- -
-- -- ---- --
----- ---- - ---------
-- -- ---- --
-------- ---------- -- -
----------------------- - --------- ------------- --
-------------- -- -
-- ----
--------------------------
--
------------ -- -
-- ----
-----------------------------
--
-
-- -----
------ -
--------- --
-
-
--
---------在上面的代码中，submitForm 方法使用 $http 的 post 方法将表单数据发送到服务器，并在响应中打印返回的数据。如果发生错误，将在控制台中输出错误日志。
3. 处理响应和错误
在使用 $http 发送 AJAX 请求时，你需要知道如何处理响应和错误。通常情况下，你需要使用 .then() 方法处理成功的响应，并使用 .catch() 方法处理错误。
在成功的情况下，响应对象包含响应状态、响应头和响应正文。你可以使用 response.data 获取服务器端发送回来的数据。
在错误的情况下，错误对象包含响应信息和错误状态。你可以使用 error.response 获取服务器端返回的响应信息。
4. 结论
本文介绍了在 Vue.js 中使用 AJAX 请求数据的方法。你可以使用 $http 对象发送 GET 和 POST 请求，并使用 .then() 方法处理成功的响应，使用 .catch() 方法处理错误。在实践中，你需要根据具体的业务逻辑进行修改和调整。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ee1c9eedcc8a97c8b26c7