Vue.js 是一个流行的 JavaScript 前端框架。Fetch API 是一种用于网络请求的现代标准。它相比传统的 XMLHttpRequest API 更易于使用和理解。在本文中，我们将探讨如何在 Vue.js 中使用 Fetch API，包括如何在组件中发起请求、如何处理响应和错误，并给出一些示例代码。
原理简介
Fetch API 是一个用于发起网络请求的简单、强大、支持 Promise 的 API。使用 Fetch API 时，我们需要使用 fetch() 函数发起请求。该函数返回一个 Promise，我们可以使用 .then() 和 .catch() 方法处理请求成功和失败的情况。
在 Vue.js 组件中使用 Fetch API
我们可以在 Vue.js 组件的 mounted() 生命周期中使用 Fetch API 发起网络请求。在 mounted() 生命周期中，Vue.js 组件已经挂载到 DOM 中并准备好渲染。因此，我们可以使用 fetch() 函数在组件挂载后立即发起请求。
以下是在 Vue.js 组件中使用 Fetch API 的示例：
-- -------------------- ---- -------
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
--------- -
-----------------------------------------------------
---------------- -- ----------------
------------ -- -
------------ - -----------
--
-------------- -- ----------------------
--
--
---------在上面的示例中，我们在组件的 mounted() 生命周期中使用 Fetch API 进行HTTP GET请求。fetch() 函数返回一个 Promise，我们使用 .then() 方法解析响应，将响应数据转换为 JSON 并将数据保存到组件的 message 数据属性中。我们也可以 在 .catch() 方法中捕获请求失败的情况。
需要注意的是，在 Vue.js 组件中可以使用 async 和 await 关键字，它们可以使代码更易读和更容易理解。以下是使用 async 和 await 进行网络请求的示例：
-- -------------------- ---- -------
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
----- --------- -
--- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------------ - -----------
- ----- ------- -
---------------------
-
--
--
---------在上面的示例中，我们使用 async 关键字定义了 mounted() 方法，然后使用 await 关键字等待 fetch() 函数并解析响应。
发送 POST 请求
除了 GET 请求之外，我们还可以使用 Fetch API 发送其他类型的请求，例如 POST 请求。POST 请求需要我们提供请求的正文（body）数据。我们可以将数据放在请求对象的 body 属性中。
以下是在 Vue.js 组件中发送 POST 请求的示例：
-- -------------------- ---- -------
----------
-----
----- -----------------------------
------ ----------- -------------- --
------- -----------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
--
--
-------- -
----- ------------ -
--- -
----- -------- - ----- --------------------------------------------------- -
------- -------
----- ---------------- ------ --------- ---
-------- -
--------------- -------------------
--
---
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
--
--
--
---------在上面的示例中，我们在 Vue.js 组件的 submitForm() 方法中发送POST 请求。我们使用 await 等待 fetch() 函数并传递一个选项对象（options object），该选项对象中包含请求的方法、请求的头（headers）和请求的正文数据。在本示例中，我们使用 JSON.stringify() 方法将数据转换为 JSON，并设置请求头的 Content-Type 属性为 application/json。注意，在实际开发中，我们可能需要对正文数据进行编码，并且 Content-Type 标头也可能需要根据数据类型进行修改，例如使用 multipart/form-data 或 text/plain。
处理错误
我们在使用 Fetch API 时，可能会遇到一些网络请求错误，例如服务器错误、网络连接问题、CORS 问题或请求超时等。因此，我们需要处理这些错误并向用户提供有用的错误信息，而不是简单地失败静默。
以下是在 Vue.js 组件中处理错误的示例：
-- -------------------- ---- -------
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
------ ---
--
--
--------- -
----------------------------------------------------
---------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
------------ -- -
------------ - -----------
--
-------------- -- -
---------- - ------
---------------------
---
--
--
---------在上面的示例中，我们使用 throw 关键字抛出一个错误并将错误数据保存到 error 数据属性中。我们还使用 .ok 属性检查响应是否成功。如果响应不成功，我们将抛出一个错误，并在 .catch() 方法中处理该错误。通过结合 Vue.js 组件的条件渲染，我们可以根据 error 数据属性是否为空，显示错误信息或显示加载的数据。
结论
在本文中，我们学习了如何在 Vue.js 组件中使用 Fetch API 进行网络请求，并解释了其原理。我们已经掌握了如何处理响应和错误，并提供了一些示例代码，以帮助您更好地理解和使用 Fetch API。虽然本文仅介绍了一些基本的用法，但它足以帮助您入门 Fetch API，并为您提供更深入的挖掘的基础。如果您想了解更多有关 Fetch API 的知识，请参考 Fetch API 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749628fa1ce006354586ed0