深入理解JavaScript Fetch API的错误处理与封装-js教程-PHP中文网

深入理解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()的通用函数，它能够：

成功时返回响应体数据。
在网络错误或非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();

登录后复制

注意事项：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

查看详情

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