如何在 JavaScript 中优雅地处理 HTTP 响应状态？

2024-03-14 01:27:20

如何优雅地处理 JavaScript 中的 HTTP 响应状态

作为开发人员，你经常会使用 JavaScript 中的 fetch() API 进行 HTTP 请求。然而，处理 HTTP 响应状态可能是一个挑战，尤其是当你要区分不同的响应代码时。本文将探讨如何使用 .then() 处理程序有效地管理 HTTP 响应状态，并提供一些有用的提示。

问题：`.then()` 处理程序中的响应状态处理

使用 fetch() 发出请求后，你可以使用 .then() 处理程序来处理响应。第一个 .then() 通常用来获取响应，第二个 .then() 用来获取响应体。但是，如果第一个 .then() 中的响应状态不是 200（成功），第二个 .then() 会失败并抛出错误。

解决方案：使用 `try-catch` 捕获错误

解决此问题的一种方法是使用 try-catch 块将潜在的错误捕获到第一个 .then() 中。这样做可以让你在发生错误时执行自定义错误处理，而不会影响后续的 .then() 处理程序。

修改后的代码：

fetch(path)
  .then(async response => {
    try {
      if (response.status !== 200) {
        throw response.status;
      } else {
        // 执行成功操作
      }
    } catch (error) {
      // 执行错误处理
    }
  })
  .then(response => response.json())
  .then(...method for the response.json()...)
  .catch(error => {
    // 处理任何其他错误
  });

其他提示

使用 response.ok 属性： response.ok 属性是一个布尔值，表示响应状态是否为 200 到 299 之间的成功代码。你可以使用它来检查响应状态，例如：

if (!response.ok) {
  throw response.status;
}

使用 XMLHttpRequest： 如果你无法使用 fetch()，可以使用 XMLHttpRequest 来处理 HTTP 响应。XMLHttpRequest 提供了 status 和 statusText 属性，可以让你检查响应状态。
使用状态码： 响应状态是一个数字代码，指示响应的类型。例如，200 表示成功，404 表示未找到，500 表示服务器错误。你可以在 MDN 文档中找到响应状态代码的完整列表：https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

常见问题解答

为什么 response.json() 在错误状态下会抛出错误？
因为 response.json() 依赖于成功的 HTTP 响应。如果响应状态不是 200，它会抛出错误以表示失败。
如何自定义错误处理？
在 try-catch 块的 catch 子句中，你可以编写自定义错误处理代码。这可以包括显示错误消息、记录错误或执行其他恢复操作。
是否可以将 response.json() 放在 try-catch 块中？
可以，但建议将 response.json() 放在第二个 .then() 处理程序中，以保持代码的组织性和可读性。
为什么我应该使用 response.ok 属性而不是直接检查 response.status？
response.ok 属性是 response.status 的一个简便方法，因为它将成功状态范围（200-299）表示为布尔值。
fetch() API 的哪些其他特性可以帮助我处理响应状态？
fetch() API 提供了 redirect、referrerPolicy 和 cache 等特性，可以帮助你控制和定制 HTTP 请求行为。