在处理网络请求时，获取响应状态是验证请求是否成功的重要步骤。fetch() 方法返回一个 Promise，该 Promise 解析为 Response 对象，其中包含关于请求结果的详细信息。本文将详细介绍如何使用 Response 对象中的 status 属性来检查和处理 HTTP 状态码。
获取响应状态
当发送一个请求后，服务器会返回一个响应，这个响应可能包含各种状态码，如200表示请求成功，404表示资源未找到等。通过 Response 对象的 status 属性，我们可以获取到服务器返回的 HTTP 状态码。
示例代码
fetch('https://api.example.com/data')
.then(response => {
console.log('HTTP状态码：', response.status);
// 在这里根据状态码执行不同的逻辑
})
.catch(error => {
console.error('请求出错：', error);
});在这个例子中，我们调用了 fetch() 方法来获取一个 URL 的数据，并通过 .then() 方法获取到响应对象。然后我们使用 response.status 来打印出 HTTP 状态码。
HTTP 状态码详解
为了更好地理解和使用 status 属性，我们需要了解一些常见的 HTTP 状态码及其含义：
- 200 OK - 请求成功，这是最常见的情况。
- 201 Created - 资源创建成功。
- 400 Bad Request - 请求无效或无法理解。
- 401 Unauthorized - 请求需要用户身份验证。
- 403 Forbidden - 服务器理解请求客户端的请求，但是拒绝执行此请求。
- 404 Not Found - 请求的资源不存在。
- 500 Internal Server Error - 服务器遇到未知错误。
判断请求状态
在实际开发中，我们经常需要根据不同的状态码来执行不同的逻辑。例如，在接收到一个200的状态码时，我们可能希望解析响应体；而在接收到404时，则可能需要提示用户资源不存在。
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
if (response.ok) { // 判断是否为成功的状态码
return response.json();
} else {
throw new Error(`HTTP状态码：${response.status}`);
}
})
.then(data => {
console.log('数据：', data);
})
.catch(error => {
console.error('请求失败：', error.message);
});在这个示例中，我们首先检查 response.ok，这是一个布尔值，表示响应是否成功（200-299范围内的状态码）。如果响应成功，我们继续解析响应体；否则，抛出一个错误，包含具体的HTTP状态码信息。
错误处理与状态码
除了使用 status 属性直接判断状态码外，还可以利用 Response 对象的其他属性和方法来进行更复杂的错误处理。例如，response.statusText 可以获取到对应状态码的文本描述。
综合示例
下面是一个结合了状态码检查、错误处理和响应体解析的综合示例：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP状态码：${response.status}，状态描述：${response.statusText}`);
}
return response.json();
})
.then(data => {
console.log('数据：', data);
})
.catch(error => {
console.error('请求失败：', error.message);
});在这个例子中，我们不仅检查了响应的状态码，还捕获并打印了状态描述，这样可以提供更详细的错误信息。
总结
通过本章的学习，我们了解了如何使用 fetch() 方法的响应对象中的 status 属性来检查和处理 HTTP 状态码。这对于构建健壮的前端应用至关重要，能够帮助开发者有效地处理不同类型的网络请求，并根据服务器的响应执行相应的业务逻辑。接下来，我们将进一步探讨如何利用 fetch() 和其他相关技术实现更复杂的功能。