Fetch API错误处理机制解析
在使用javascript的fetch api进行网络请求时，开发者常常会遇到.catch()块未能捕获到http错误（例如404 not found、500 internal server error）的情况。这是因为fetch api的设计理念将网络错误（如断网、dns解析失败、跨域策略阻塞）与服务器返回的http错误响应区分开来。.catch()方法仅用于捕获前者，而对于后者，fetch api认为服务器已经成功响应，即使响应的状态码表示错误。
要正确处理HTTP错误，我们需要在Promise链中的第一个.then()块内显式检查Response对象的属性。Response对象提供了几个关键属性来判断请求的成功与否：
- response.ok: 这是一个布尔值，如果HTTP状态码在200-299的范围内，则为true；否则为false。
- response.status: 返回HTTP响应的状态码（例如200、404、500）。
- response.statusText: 返回HTTP响应的状态消息（例如"OK"、"Not Found"）。
当response.ok为false时，我们应该手动抛出一个错误，这样这个错误才能被后续的.catch()块捕获并处理。
实践中的错误处理
以下是一个基于用户提供的场景，演示如何正确处理Fetch API错误的示例代码。我们将改进原有的代码，使其能够有效捕获HTTP错误以及在请求前进行输入验证。
let searchBtn = document.getElementById("search-btn");
let countryInp = document.getElementById("country-inp");
let resultDiv = document.getElementById("result"); // 假设有一个用于显示结果的div
searchBtn.addEventListener("click", () => {
let countryName = countryInp.value.trim(); // 使用trim()去除首尾空格
// 1. 请求前的数据验证
if (countryName.length === 0) {
resultDiv.innerHTML = `输入框不能为空。
`;
return; // 阻止API请求
}
let finalURL = `https://restcountries.com/v3.1/name/${countryName}?fullText=true`;
console.log(`请求URL: ${finalURL}`);
fetch(finalURL)
.then(response => {
// 2. 检查HTTP响应状态
if (!response.ok) {
// 如果响应状态不是2xx，则抛出错误
// 可以根据statusText或status code提供更具体的错误信息
const errorText = response.status === 404 ? "未找到该国家，请检查国家名称。" : `HTTP错误: ${response.status} ${response.statusText}`;
throw new Error(errorText);
}
return response.json(); // 解析JSON数据
})
.then(data => {
// 3. 成功处理数据
// 检查data是否为数组且有内容，以防API返回空数组或其他非预期格式
if (!Array.isArray(data) || data.length === 0) {
throw new Error("API返回数据格式异常或为空。");
}
const countryData = data[0];
resultDiv.innerHTML = `
@@##@@
${countryData.name.common}
首都:
${countryData.capital[0]}
所属洲:
${countryData.continents[0]}
货币:
${Object.keys(countryData.currencies)[0]}
`;
console.log(countryData);
})
.catch(error => {
// 4. 统一的错误捕获与显示
// 这里会捕获到网络错误、response.ok为false时抛出的错误以及数据解析错误
console.error("请求或处理数据时发生错误:", error);
resultDiv.innerHTML = `${error.message || "请求失败，请稍后再试。"}
`;
});
});代码改进说明：
- 请求前的数据验证 (countryName.length === 0): 在发起fetch请求之前，我们首先检查用户输入是否为空。这是一种良好的前端实践，可以避免发送无效请求，减轻服务器压力，并提供即时用户反馈。
- HTTP响应状态检查 (!response.ok): 在第一个.then()块中，我们增加了if (!response.ok)的判断。如果响应状态码不在200-299范围内，就创建一个新的Error对象并抛出。这个被抛出的错误会被后续的.catch()块捕获。
- 细化错误信息: 在抛出错误时，我们根据response.status提供了更具体的错误信息，例如404时提示“未找到该国家”，增强了用户体验。
- 数据解析后的验证: 即使HTTP请求成功，API返回的数据也可能不符合预期（例如，返回一个空数组而不是国家对象）。我们增加了对data的检查，以确保后续的数据访问不会出错。
- 统一错误捕获: .catch()块现在能够捕获所有类型的错误：网络错误、由!response.ok抛出的HTTP错误、以及在数据处理过程中可能发生的其他错误。error.message可以用来显示更具体的错误原因。
注意事项与总结
- 区分错误类型: 始终记住Fetch API的.catch()只处理网络错误。HTTP错误需要手动在.then()中检查并抛出。
- 输入验证的重要性: 在客户端进行初步的输入验证，可以有效减少不必要的网络请求和服务器负载，并提升用户体验。
- 提供清晰的用户反馈: 无论是输入验证失败、网络错误还是HTTP错误，都应向用户提供清晰、友好的错误提示，指导他们如何解决问题或理解当前状态。
- 使用finally块: 如果有需要在请求完成（无论成功或失败）后执行的清理工作（例如，隐藏加载指示器），可以使用.finally()块。
通过上述方法，我们可以构建一个更加健壮和用户友好的应用程序，有效处理Fetch API请求中可能出现的各种错误情况。
