本文旨在探讨如何使用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
2. 处理文本响应并拒绝失败的Promise
这种策略更符合Promise的“成功则解析，失败则拒绝”的约定。当请求失败（网络错误或非200 HTTP状态码）时，callApi函数返回的Promise会被拒绝，调用者可以使用.catch()来捕获错误。
/** * 封装 Fetch API 调用，处理文本响应，并在失败时拒绝Promise。 * @param {Function} myFetch - 实际执行 fetch 请求的函数，返回一个 Promise。 * @returns {Promise} 一个 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
2. 处理JSON响应并拒绝失败的Promise
在失败时拒绝Promise，并返回一个包含错误详情的JSON对象。
/** * 封装 Fetch API 调用，处理JSON响应，并在失败时拒绝Promise。 * @param {Function} myFetch - 实际执行 fetch 请求的函数，返回一个 Promise。 * @returns {Promise
总结与最佳实践
在封装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调用层，从而提高代码的可读性、可维护性和健壮性。
以上就是深入理解JavaScript Fetch API的错误处理与封装的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522678.html
微信扫一扫 
支付宝扫一扫 
