在 SPA（Single Page Application）开发中，数据的取得是一个至关重要的环节。在数据取得上，XMLHttpRequest（XHR）曾经是主流，但现在 Fetch 已经取代了 XHR 成为了现代 Web 开发的一种首选方案。在这篇文章中，我们将深入讨论如何使用 Fetch 在 SPA 应用中取得数据，为你带来深度且有学习和指导意义的内容。
Fetch 是什么？
Fetch 是一个新的 Web API，它提供了一种新的方式来进行网络请求。它比 XHR 更加强大和灵活，并且使用起来更加方便。在 Fetch 中，我们通过建立 Promise 对象来发起网络请求，以获取响应对象。
Fetch 代码示例
下面是一个简单的 Fetch 示例，它展示了如何使用 Fetch 获取一个 JSON 格式的响应。
------------------------------------------- -------------- -- ---------------- ---------- -- -------------------
在这个示例中，我们首先使用 fetch() 方法发起一个 GET 请求来获取数据，该请求的 URL 是我们要获取的 JSON 数据的 API 地址。然后我们通过 .then() 函数链来处理从服务器返回的数据。我们首先使用 response.json() 方法，将返回的 JSON 数据转换成一个 JavaScript 对象。然后使用 .then() 方法打印输出该对象。
Fetch 基本参数
fetch() 函数接受两个参数：要获取的 URL 和一个可选的配置对象。配置对象可选，包含一些可配置的请求选项，例如请求方法、请求头、请求 body 等等。
请求方法
在 Fetch 中，请求方法是非常重要的，因为它定义了要对资源执行何种操作。Fetch 支持所有 HTTP 请求方法，例如 GET、POST、PUT、DELETE 等等。请求方法一般通过配置对象的 method 属性定义。
下面是一个 POST 请求的示例：
------------------ - ------- ------- ----- -------------------- -- -------------- -- ---------------- ---------- -- -------------------
在这个示例中，我们使用了 POST 请求方法，并且还通过配置对象传递了要发送的 JSON 数据。
请求头
在 Fetch 中，请求头可用于包含额外的信息，例如身份验证、请求数据类型、语言首选项等等。Fetch 中的请求头也是通过配置对象传递的。
下面是一个设置请求头的示例：
------------------ -
-------- -
---------------- ------- ----------
--------------- ------------------
-
--
-------------- -- ----------------
---------- -- -------------------在这个示例中，我们设置了 Authorization 和 Content-Type 请求头，并将其传递给 fetch() 函数使用。
请求 body
在某些情况下，我们需要将一些数据随 POST 或 PUT 请求一起发送到服务器。Fetch 中可以通过配置对象的 body 属性来实现。body 数据可以是字符串、FormData、Blob、ArrayBuffer 或者 URLSearchParams 实例。
下面是以下列出的其中一个示例：
发送 JSON 数据
------------------ -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- ------
---- --
--
--
-------------- -- ----------------
---------- -- -------------------在这个示例中，我们将一个 JSON 对象作为请求体发送给服务器。
Fetch 错误处理
当网络请求发生错误时，我们需要有一些机制来处理这些错误。Fetch 提供了 catch() 方法来处理请求过程中出现的任何错误。这个 catch() 方法在 Promise 链中使用，以捕获响应对象的错误。
下面是一个处理 Fetch 错误的示例：
------------------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
---------- -- ------------------
------------ -- ----------------------- --------在这个示例中，我们首先检查响应对象是否成功处理 OK；如果不是，我们抛出一个 Error 对象。我们使用 catch() 方法来捕获错误，并打印错误信息。
函数封装
为了在项目中更方便地使用 Fetch，我们可以将其封装成一个函数。这个函数将接受请求参数和返回响应数据。这样我们就可以在项目中的其他组件中使用这个函数，而不必重复代码。
下面是一个基本的 Fetch 封装示例：
-------- -------------- ------- - --- -
------ ---------- --------
-------------- -- -
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
--
------------ -- ----------------------- --------
-在这个示例中，我们首先定义了一个函数，其中传入了一个 URL 和一个可选的配置对象。然后我们在函数内部使用 fetch() 函数获取数据，并返回一个 Promise 对象。在返回数据之前，我们检查了响应对象是否成功，如果不是，我们抛出一个 Error 对象并返回错误消息。
总结
Fetch 是现代 Web 开发中的一个非常强大的工具，它提供了更方便、更强大的方式来进行网络请求。在本文中，我们深入讨论了 Fetch 的各种用法，包括基本参数、错误处理和函数封装。这些知识可以帮助你更好地在 SPA 开发中实现数据取得，并提高你的编程能力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654793cf7d4982a6eb1eb6d3