深入理解JavaScript Fetch API的错误处理与封装

本文旨在探讨如何使用JavaScript的Fetch API进行健壮的网络请求，并有效封装其错误处理逻辑。我们将详细介绍如何利用async/await语法，优雅地处理不同类型的请求失败（如网络错误、非200 HTTP状态码），以及如何根据业务需求返回统一的成功数据或详细的错误信息，同时兼顾文本和JSON格式的响应处理。

优化Fetch API的错误处理与封装

在现代web开发中，fetch api是进行网络请求的强大工具。然而，其默认的错误处理机制可能不够直观，尤其是在需要统一处理各种请求失败情况时。例如，fetch在遇到http状态码为4xx或5xx时并不会抛出错误，而是将其视为成功的响应，需要我们手动检查response.ok属性。同时，response.text()或response.json()方法返回的也是promise，需要进一步处理才能获取实际数据。

为了构建一个健壮且易于维护的API调用层，我们通常会封装fetch请求。本文将指导您如何创建一个名为callApi()的通用函数，它能够：

1. 成功时返回响应体数据。
2. 在网络错误或非200 HTTP状态码时，提供清晰的错误信息。
3. 灵活处理文本和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来解析。

家作

淘宝推出的家装家居AI创意设计工具

38

查看详情

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调用层，从而提高代码的可读性、可维护性和健壮性。