Fetch response.ok 属性-JavaScript中文网-JavaScript教程资源分享门户

response.ok 是 Fetch API 中的一个重要属性，用于检查 HTTP 请求是否成功。这个布尔值属性会返回 true，如果响应的状态码是 200 到 299 之间的数字；否则返回 false。

基本概念和使用场景

在 Web 开发中，我们经常需要从服务器获取数据，并根据响应来决定下一步的操作。response.ok 属性提供了一种简单的方式来判断请求是否成功，从而避免处理错误的逻辑变得复杂。这对于构建健壮的前端应用非常重要。

理解状态码

HTTP 状态码是一组三位数字，用于表示服务器对请求的响应类型。例如：

200 表示请求成功。
404 表示请求的资源未找到。
500 表示服务器内部错误。

通过 response.ok 属性，我们可以轻松地判断请求的状态是否在 200 到 299 范围内，这通常意味着请求已经成功完成。

实例演示

假设我们需要从一个 API 获取用户数据，我们可以使用以下代码片段：

// javascriptcn.com 代码示例
fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们首先发送了一个 GET 请求到 https://api.example.com/users。然后，我们检查 response.ok 是否为 false。如果是，我们就抛出一个错误，这将被 .catch 方法捕获并处理。否则，我们将继续解析 JSON 数据。

处理不同的状态码

虽然 response.ok 可以帮助我们快速判断请求是否成功，但在某些情况下，我们也可能需要根据具体的状态码采取不同的操作。例如，对于一些非标准的 API，服务器可能会返回特定的状态码来表示特定的错误情况。

我们可以利用 response.status 来获取更详细的状态码信息，并根据这些信息进行更精细的控制：

// javascriptcn.com 代码示例
fetch('https://api.example.com/users')
  .then(response => {
    if (response.status >= 400) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们不仅检查了 response.ok，还检查了状态码是否大于等于 400。这确保了我们能够捕获所有类型的错误，而不仅仅是那些导致 response.ok 返回 false 的错误。

实践中的注意事项

避免不必要的错误处理：如果请求总是成功的，那么检查 response.ok 可能是多余的。然而，在大多数情况下，最好还是检查一下，以防万一。
自定义错误消息：在抛出错误时，可以提供更具描述性的错误消息，这样有助于调试和理解问题所在。
结合其他属性：除了 response.ok 和 response.status，还可以考虑使用 response.statusText 来获取服务器返回的文本描述，这在某些情况下可能会很有帮助。

总结

response.ok 属性是一个强大的工具，可以帮助开发者轻松地判断 HTTP 请求是否成功。通过结合其他相关属性，我们可以构建更加健壮和灵活的应用程序。记住，良好的错误处理是任何高质量 Web 应用的重要组成部分。