Fetch response.statusText 属性

response.statusText 是 Fetch API 中的一个属性，用于获取服务器响应的状态消息。状态消息通常是人类可读的字符串，例如“OK”或“Not Found”。这个属性返回一个字符串，代表 HTTP 响应的状态消息。

如何使用 response.statusText

获取状态消息

当你从服务器接收到响应时，可以通过 response.statusText 来查看状态消息。这有助于开发者更好地理解请求的结果，尤其是在调试过程中。

fetch('https://api.example.com/data')
  .then(response => {
    console.log('Status message:', response.statusText);
    return response.json();
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们使用 fetch() 方法发起一个 GET 请求。当接收到响应后，通过 response.statusText 获取并打印状态消息。

结合其他属性使用

response.statusText 通常与 response.status 一起使用。response.status 返回的是一个数字，表示 HTTP 状态码，而 response.statusText 则是对应的状态消息。两者结合使用可以更全面地了解请求和响应的状态。

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) { // 检查响应是否成功
      console.log('Status code:', response.status);
      console.log('Status message:', response.statusText);
      return response.json();
    } else {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们首先检查响应是否成功（response.ok）。如果响应成功，则打印状态码和状态消息；否则抛出错误。

处理错误情况

当请求失败时，response.statusText 可能会返回默认的错误消息。在这种情况下，你可能需要根据具体的错误情况来处理。

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

在这个例子中，我们检查响应是否成功。如果不成功，我们抛出一个包含状态码和状态消息的错误对象。

实际应用示例

假设你需要从一个 API 获取数据，并且需要根据不同的 HTTP 状态码来处理这些数据。你可以使用 response.statusText 来帮助你识别和处理特定的错误情况。

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    if (response.status === 200) {
      console.log('Success:', response.statusText);
      return response.json();
    } else if (response.status === 404) {
      console.error('Not found:', response.statusText);
    } else if (response.status >= 500) {
      console.error('Server error:', response.statusText);
    } else {
      throw new Error(`Unexpected status: ${response.status}, message: ${response.statusText}`);
    }
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们根据不同的状态码来处理响应。对于不同的状态码，我们打印相应状态消息，并采取相应的措施。

小结

通过 response.statusText，你可以方便地获取服务器响应的状态消息。这有助于你更好地理解和处理请求结果，特别是在调试和处理错误情况时。结合 response.status 使用，可以让你更全面地掌握请求和响应的状态信息。