在 Web 应用程序中，使用 fetch() API 来获取远程数据已经成为一种流行的方式。然而，在以 Progressive Web App（PWA）为代表的现代 Web 应用开发中，使用 Fetch API 的过程中会遇到一些问题。这篇文章将介绍如何解决在 PWA 中使用 Fetch API 的问题，并提供相关的示例代码。
Fetch API 的问题
Fetch API 的主要问题在于，它只能检测到基本的网络错误，例如 DNS 错误或连接超时。如果服务器在响应时返回了错误 HTTP 状态码，Fetch API 就无法检测到这个问题。这是由于 Fetch API 在默认情况下只会将网络错误返回给用户，不会在控制台或开发者工具中输出错误信息。这使得在开发 PWA 时使用 Fetch API 变得困难。
在 PWA 中，使用 Service Worker 实现“离线缓存”的功能也是很重要的。然而，如果 Fetch API 在获取远程数据时遭遇错误，它无法自动使用缓存的数据。因此，如果我们在 PWA 中使用 Fetch API，我们需要考虑如何处理 HTTP 错误状态码，以便在缓存失效时正确地处理数据。
解决方案
为了解决这个问题，我们需要监视 Fetch API 的响应并在发现 HTTP 错误状态码时立即抛出异常。为了做到这一点，我们可以在响应拦截器中检查 HTTP 状态码。接下来，我们可以使用 Promise 来返回响应或异常，以便在 PWA 中更好地处理数据。
下面是一个基本的响应拦截器示例：
-------- ------------------------ -
-- -------------- -
----- ---------------------------
-
------ ----------------
-在这个示例中，我们使用了 response.ok 属性来检查响应是否返回 HTTP 错误状态码。如果是，我们就抛出一个异常，并在异常处理程序中正确处理数据。
在实际使用中，我们可以将这个响应拦截器与 Fetch API 结合使用，例如：
------------------------------------- --------------------- ---------- -- ------------------ ------------ -- ----------------------
在这个示例中，我们首先使用 Fetch API 获取数据。接下来，我们使用 then() 方法来传递响应拦截器，并在处理数据之前先检查服务器响应的状态码。如果状态码不正确，将抛出一个异常并将控制权传递给异常处理程序。否则，我们将捕获数据并使用它们。
结论
在 PWA 开发过程中，使用 Fetch API 来获取远程数据是一种常见的方式。但是，在实际使用中，我们必须考虑如何处理 HTTP 错误状态码以及如何使用 Service Worker 缓存处理数据。在本文中，我们提供了一种解决方案，即使用响应拦截器来检查 HTTP 状态码并在错误时抛出异常。这种方法可以确保我们正确地处理数据，并减少开发过程中的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67065b79d91dce0dc85c4724