在进行网络请求时，错误处理是确保应用稳定性和用户体验的重要环节。使用 Fetch API 进行 HTTP 请求时，我们同样需要关注错误处理。本章将详细介绍如何有效地处理 Fetch 请求过程中可能出现的错误。
了解 Fetch API 的错误机制
Fetch API 提供了一种基于 Promise 的接口，用于发起 HTTP 网络请求。与传统的 XMLHttpRequest 不同，Fetch API 在请求失败时并不会自动抛出异常。相反，它会在请求失败时返回一个响应对象，但该对象的状态码表示请求失败（例如状态码为 404 或 500）。因此，我们需要手动检查响应的状态码来判断请求是否成功。
检查响应状态码
为了确保请求成功，我们可以在接收到响应后检查其状态码。通常情况下，状态码在 200-299 范围内的响应被认为是成功的。以下是一个简单的示例：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));在这个例子中，response.ok 是一个布尔值，当响应状态码在 200-299 范围内时为 true。如果响应状态码不在这个范围内，我们可以抛出一个错误，从而进入 .catch 方法进行错误处理。
处理网络错误
除了响应状态码以外，Fetch API 还可能因为网络问题而失败。例如，当请求的 URL 不存在或服务器无法访问时，Fetch API 会抛出一个网络错误。这种错误通常发生在请求阶段，而不是响应阶段。为了捕获这些错误，我们可以将 .catch 方法放在 .then 方法之后，以捕获任何可能发生的异常。
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
// 这里可以添加额外的错误处理逻辑，比如记录日志或显示错误信息
});使用 try-catch 语句
虽然 .catch 方法可以用来捕获 Fetch API 抛出的错误，但在某些情况下，使用 try-catch 语句可能会更直观和易于理解。try-catch 结构允许我们在一个代码块中执行请求，并在另一个代码块中处理任何可能发生的异常。
// javascriptcn.com 代码示例
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('There has been a problem with your fetch operation:', error);
}自定义错误消息
在处理 Fetch API 错误时，自定义错误消息可以帮助我们更好地理解和调试问题。通过创建一个新的错误对象并传递自定义消息，我们可以提供更详细的错误信息，这有助于前端开发者和后端团队之间的沟通。
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`Request failed with status ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error.message));总结
通过以上介绍，我们了解到 Fetch API 在处理错误时的一些常见策略和最佳实践。正确的错误处理不仅可以提高应用的健壮性，还可以提升用户的体验。希望本章的内容能帮助你更好地掌握 Fetch API 的错误处理技巧。