优化Fetch API的错误处理与封装
在现代web开发中，fetch api是进行网络请求的强大工具。然而，其默认的错误处理机制可能不够直观，尤其是在需要统一处理各种请求失败情况时。例如，fetch在遇到http状态码为4xx或5xx时并不会抛出错误，而是将其视为成功的响应，需要我们手动检查response.ok属性。同时，response.text()或response.json()方法返回的也是promise，需要进一步处理才能获取实际数据。
为了构建一个健壮且易于维护的API调用层，我们通常会封装fetch请求。本文将指导您如何创建一个名为callApi()的通用函数，它能够：
- 成功时返回响应体数据。
- 在网络错误或非200 HTTP状态码时，提供清晰的错误信息。
- 灵活处理文本和JSON响应。
避免不必要的Promise封装
首先，一个常见的误区是使用new Promise来封装fetch返回的Promise。由于fetch本身就返回一个Promise，我们可以直接链式调用.then()和.catch()，或者更推荐地，使用async/await语法，这样可以避免Promise的嵌套，使代码更扁平、更易读。
错误的示例（应避免）：
// 假设 myFetch() 是对 fetch() 的调用
return new Promise(
(resolve, reject) => {
myFetch()
.then((response) => {
if (response.ok) {
resolve(response); // 此时 response.text() 仍是 Promise
} else {
reject(`${response.status}: ${response.text}`); // 错误：response.text 也是 Promise
}
}, (error) => {
reject(error);
});
}
);上述代码的问题在于，response.text本身是一个Promise，直接拼接会导致错误。正确的做法是等待response.text()或response.json()解析出实际的字符串或对象。
立即学习“Java免费学习笔记（深入）”；
使用Async/Await简化异步逻辑
async/await是处理Promise的语法糖，它使得异步代码看起来像同步代码一样直观。这对于封装fetch请求和处理其响应体尤其有效。
1. 处理文本响应并始终解析（不拒绝Promise）
这种策略意味着callApi函数返回的Promise永远不会被拒绝（reject），而是始终解析（resolve）一个包含请求状态和数据的对象。调用者需要检查返回对象的ok属性来判断请求是否成功。
/**
* 封装 Fetch API 调用，处理文本响应，并始终解析Promise。
* @param {Function} myFetch - 实际执行 fetch 请求的函数，返回一个 Promise。
* @returns {Promise<Object>} 一个 Promise，解析为一个包含请求状态和响应体的对象。
*/
async function callApiForTextAlwaysResolve(myFetch) {
let ok = false, status = 0, body = null, error = false;
try {
const response = await myFetch();
({ ok, status } = response); // 解构获取 ok 和 status
body = await response.text(); // 等待文本内容解析
if (!ok) {
error = true; // 如果响应状态不是2xx，也视为逻辑错误
}
} catch (e) {
// 捕获网络错误或 fetch 内部错误
error = true;
body = e.message || "Network error or fetch failed";
status = 0; // 表示没有HTTP状态码
}
return { ok: !error && ok, status, body, error }; // 返回一个统一的结构
}
// 示例调用
async function exampleUsageAlwaysResolveText() {
// 假设 myFetch 模拟一个 fetch 请求
const myMockFetch = async () => {
// 模拟成功响应
// return new Response("Hello, World!", { status: 200, statusText: "OK" });
// 模拟非200响应
return new Response("Not Found", { status: 404, statusText: "Not Found" });
// 模拟网络错误
// throw new Error("Failed to fetch");
};
const result = await callApiForTextAlwaysResolve(myMockFetch);
if (result.ok) {
console.log("请求成功 (Always Resolve Text):", result.body);
} else {
console.error("请求失败 (Always Resolve Text):", `状态码: ${result.status}, 错误信息: ${result.body}`);
}
}
exampleUsageAlwaysResolveText();2. 处理文本响应并拒绝失败的Promise
这种策略更符合Promise的“成功则解析，失败则拒绝”的约定。当请求失败（网络错误或非200 HTTP状态码）时，callApi函数返回的Promise会被拒绝，调用者可以使用.catch()来捕获错误。
/**
* 封装 Fetch API 调用，处理文本响应，并在失败时拒绝Promise。
* @param {Function} myFetch - 实际执行 fetch 请求的函数，返回一个 Promise。
* @returns {Promise<string>} 一个 Promise，成功时解析为响应文本，失败时拒绝并带有错误信息。
*/
async function callApiForTextRejectOnError(myFetch) {
const response = await myFetch(); // 等待 fetch 完成
const body = await response.text(); // 等待文本内容解析
if (!response.ok) {
// 如果响应状态不是2xx，则抛出错误，这将导致Promise被拒绝
throw `${response.status}: ${body}`;
}
return body; // 成功时返回响应文本
}
// 示例调用
async function exampleUsageRejectOnErrorText() {
const myMockFetch = async () => {
// 模拟成功响应
// return new Response("Hello, World!", { status: 200, statusText: "OK" });
// 模拟非200响应
return new Response("Unauthorized", { status: 401, statusText: "Unauthorized" });
// 模拟网络错误 (需要包装在 try-catch 中捕获)
// throw new Error("Failed to fetch");
};
try {
const data = await callApiForTextRejectOnError(myMockFetch);
console.log("请求成功 (Reject On Error Text):", data);
} catch (error) {
console.error("请求失败 (Reject On Error Text):", error);
}
}
exampleUsageRejectOnErrorText();注意事项：
- 在callApiForTextRejectOnError函数内部，我们没有使用try...catch来捕获myFetch()可能抛出的网络错误。这是因为如果myFetch()（即底层的fetch）抛出网络错误，await myFetch()会直接导致callApiForTextRejectOnError返回的Promise被拒绝，错误会由外部的try...catch捕获。
- 如果需要在callApiForTextRejectOnError内部对网络错误进行特定处理，可以添加try...catch。
处理JSON响应
当API返回JSON数据时，我们需要使用response.json()方法。这个方法同样返回一个Promise，需要await来解析。
1. 处理JSON响应并始终解析（不拒绝Promise）
与处理文本类似，返回一个包含JSON数据的对象，并通过ok属性指示成功或失败。
/**
* 封装 Fetch API 调用，处理JSON响应，并始终解析Promise。
* @param {Function} myFetch - 实际执行 fetch 请求的函数，返回一个 Promise。
* @returns {Promise<Object>} 一个 Promise，解析为一个包含请求状态和响应体的对象。
*/
async function callApiForJsonAlwaysResolve(myFetch) {
let ok = false, status = 0, body = null, error = false;
try {
const response = await myFetch();
({ ok, status } = response);
body = await response.json(); // 等待JSON内容解析
if (!ok) {
error = true;
}
} catch (e) {
error = true;
body = { message: e.message || "Network error or JSON parsing failed" }; // 确保错误信息也是对象
status = 0;
}
return { ok: !error && ok, status, body, error };
}
// 示例调用
async function exampleUsageAlwaysResolveJson() {
const myMockFetch = async () => {
// 模拟成功响应
// return new Response(JSON.stringify({ id: 1, name: "Test" }), { status: 200 });
// 模拟非200响应
return new Response(JSON.stringify({ code: "INVALID_DATA", message: "Invalid input" }), { status: 400 });
// 模拟JSON解析错误 (返回非JSON文本)
// return new Response("This is not JSON", { status: 200 });
};
const result = await callApiForJsonAlwaysResolve(myMockFetch);
if (result.ok) {
console.log("请求成功 (Always Resolve JSON):", result.body);
} else {
console.error("请求失败 (Always Resolve JSON):", `状态码: ${result.status}, 错误信息:`, result.body);
}
}
exampleUsageAlwaysResolveJson();2. 处理JSON响应并拒绝失败的Promise
在失败时拒绝Promise，并返回一个包含错误详情的JSON对象。
/**
* 封装 Fetch API 调用，处理JSON响应，并在失败时拒绝Promise。
* @param {Function} myFetch - 实际执行 fetch 请求的函数，返回一个 Promise。
* @returns {Promise<Object>} 一个 Promise，成功时解析为JSON对象，失败时拒绝并带有错误对象。
*/
async function callApiForJsonRejectOnError(myFetch) {
let ok = false, status = 0, body = null, error = true; // 默认 error 为 true
try {
const response = await myFetch();
({ ok, status } = response);
body = await response.json();
error = false; // 如果走到这里，说明没有网络错误和JSON解析错误
} catch (e) {
// 捕获网络错误或 JSON 解析错误
body = { message: e.message || "Network error or JSON parsing failed" };
status = 0; // 没有HTTP状态码
// error 保持为 true
}
if (!ok || error) { // 如果HTTP状态码不是2xx，或者捕获到了错误
throw { error: true, status, body }; // 拒绝Promise并返回错误对象
}
return body; // 成功时返回JSON对象
}
// 示例调用
async function exampleUsageRejectOnErrorJson() {
const myMockFetch = async () => {
// 模拟成功响应
// return new Response(JSON.stringify({ id: 2, name: "Product" }), { status: 200 });
// 模拟非200响应
return new Response(JSON.stringify({ code: "NOT_FOUND", message: "Resource not found" }), { status: 404 });
// 模拟网络错误
// throw new Error("Connection refused");
};
try {
const data = await callApiForJsonRejectOnError(myMockFetch);
console.log("请求成功 (Reject On Error JSON):", data);
} catch (err) {
console.error("请求失败 (Reject On Error JSON):", err);
}
}
exampleUsageRejectOnErrorJson();总结与最佳实践
在封装Fetch API时，选择哪种错误处理策略取决于您的应用程序需求：
-
始终解析（Always Resolve）：
- 优点：简化了调用者的代码，无需try...catch，所有结果都通过.then()处理。
- 缺点：调用者必须手动检查返回对象的ok或error属性来判断请求状态。
- 适用场景：当您希望所有API调用都返回一个统一的结构，且错误处理逻辑相对简单时。
-
拒绝失败（Reject On Error）：
- 优点：更符合Promise的语义，可以使用try...catch（配合async/await）或.catch()来集中处理错误。
- 缺点：需要更细致的try...catch或.catch()链来处理不同类型的错误。
- 适用场景：当您希望利用Promise的错误传播机制，并在不同错误类型下执行不同逻辑时。
通用注意事项：
- 统一错误格式：无论选择哪种策略，都应确保错误信息或错误对象具有一致的结构，便于前端解析和展示。
- 网络错误与HTTP错误：fetch本身只会对网络错误（如断网、DNS解析失败）或CORS问题抛出错误，而HTTP状态码（如404, 500）则被视为成功的响应，需要手动检查response.ok。
- 响应体解析错误：response.json()或response.text()在解析失败时也会抛出错误，需要妥善处理。
-
myFetch的抽象：在示例中，myFetch是一个抽象，实际应用中它可能是一个预配置了请求头、认证信息等的fetch调用，例如：
const myActualFetch = (url, options) => fetch(url, { headers: { 'Authorization': 'Bearer YOUR_TOKEN', 'Content-Type': 'application/json' }, ...options });通过上述封装，您可以构建一个既强大又易于管理的API调用层，从而提高代码的可读性、可维护性和健壮性。
