本文旨在解决react应用中使用`fetch` api时，请求未能按预期执行或错误处理不完善的问题。我们将探讨`fetch` api默认错误处理的局限性，并提供一个自定义的`fetcher`工具函数，以实现更全面、更一致的api响应和错误处理机制，从而提升应用的稳定性和可维护性。
引言：理解Fetch API的错误处理挑战
在react应用中，我们经常使用useEffect钩子来执行数据获取等副作用操作。fetch API是浏览器原生提供的强大工具，用于发起网络请求。然而，许多开发者在使用fetch时会遇到一个常见误区：fetch默认情况下只会在网络连接失败（例如，断网或服务器无响应）时才抛出错误，而对于http状态码表示的错误（如404 Not Found、500 internal Server Error），它并不会自动抛出异常。在这种情况下，response.ok属性会变为false，但fetch promise本身仍然会成功解决（resolve），导致外部的try–catch块无法捕获这些“非网络”错误。
例如，以下代码片段展示了这种常见的使用模式：
useEffect(() => { const getPosts = async () => { try { const Token = AuthContext.loggedIn() ? AuthContext.getToken() : 0; if (!token) { return false; } const response = await fetch( "http://localhost:5008/workout/getAllPosts", { method: "GET", headers: { "Content-Type": "application/json", authorization: `Bearer ${token}`, }, } ); // 这里的!response.ok只会在HTTP状态码为4xx或5xx时为true， // 但fetch Promise本身不会抛出错误，而是成功resolve。 if (!response.ok) { throw new Error("Something went wrong"); // 需要手动抛出 } const { result } = await response.json(); setPosts(result); } catch (err) { console.error(err); // 只有网络错误或手动抛出的错误才会被捕获 } }; getPosts(); }, []);
尽管代码中包含了if (!response.ok) { throw new Error(“Something went wrong”); } 这样的逻辑，但这种手动检查和抛出错误的方式在每个请求中重复，且无法统一处理服务器返回的错误详情（例如，服务器可能在400 Bad Request时返回一个包含错误消息的JSON对象）。为了构建更健壮、更易于维护的React应用，我们需要一种更优雅、更集中的方式来处理API请求及其可能产生的错误。
构建自定义Fetch工具函数 (fetcher)
为了解决fetch API的局限性并提供统一的错误处理机制，我们可以封装一个自定义的fetcher工具函数。这个函数将负责发起请求、检查响应状态，并在遇到HTTP错误时，解析响应体并抛出包含详细信息的错误。
以下是一个名为fetcher.js的文件，其中定义了我们的fetcher函数：
// fetcher.js const fetcher = (url, options) => fetch(url, options) .then(async (response) => { // 检查响应是否成功 (HTTP状态码在200-299之间) if (!response.ok) { // 如果不是成功响应，尝试解析响应体作为错误信息 // 注意：有些错误响应可能不返回JSON，这里需要考虑兼容性 try { const errorData = await response.json(); // 抛出包含服务器返回错误信息的错误 throw errorData; } catch (jsonError) { // 如果响应体不是有效的JSON，或者解析失败， // 则抛出一个通用错误，可以包含状态码 throw new Error(`HTTP error! Status: ${response.status}, Message: ${response.statusText}`); } } // 如果响应成功，解析响应体为JSON并返回 return response.json(); }) .catch((err) => { // 在开发环境中打印原始错误，便于调试 if (process.env.node_ENV === "development") { console.error("Fetcher error:", err); } // 将错误重新抛出，以便调用者可以进一步处理 throw err; }); export default fetcher;
fetcher函数的工作原理：
- fetch(url, options): 发起标准的网络请求。
- .then(async (response) => { … }): 当fetch Promise解决时（无论是成功响应还是HTTP错误），此回调函数会被执行。
- if (!response.ok): 这是一个关键步骤。它检查HTTP状态码是否在200-299的成功范围内。如果不在，意味着这是一个HTTP错误（如401, 404, 500等）。
- throw await response.json();: 当response.ok为false时，我们尝试将响应体解析为JSON。许多API在发生错误时会返回一个包含错误详情的JSON对象。通过throw这个解析后的对象，我们能够将服务器提供的详细错误信息传递给调用者。
- return response.json();: 如果response.ok为true，则说明请求成功，我们正常解析响应体并返回其JSON内容。
- .catch((err) => { … }): 这个catch块用于捕获由fetch本身抛出的网络错误，或者由我们上述逻辑中throw出的HTTP错误。
- if (process.env.NODE_ENV === “development”) console.error(“Fetcher error:”, err);: 在开发环境下，打印捕获到的错误信息，这对于调试非常有用。在生产环境中，通常会关闭或使用更复杂的错误报告机制。
- throw err;: 重新抛出错误，确保调用fetcher的函数能够通过自己的try-catch块或.catch()方法捕获到这个错误，并进行相应的处理。
在React组件中集成和使用fetcher
有了自定义的fetcher函数，我们就可以在React组件中以更简洁、更健壮的方式发起API请求。现在，我们的useEffect代码将变得更加清晰，因为它不再需要手动检查response.ok并抛出错误。
// 假设您已将fetcher.js导入 import fetcher from './fetcher'; // 根据您的文件路径调整 useEffect(() => { const getPosts = async () => { try { const token = AuthContext.loggedIn() ? AuthContext.getToken() : 0; if (!token) { // 如果没有token，直接返回，不发起请求 console.warn("No authentication token found. Skipping fetch."); return; } // 使用自定义的fetcher发起请求 const data = await fetcher( "http://localhost:5008/workout/getAllPosts", { method: "GET", headers: { "Content-Type": "application/json", authorization: `Bearer ${token}`, }, } ); // 如果fetcher成功解决，data将是解析后的JSON数据 console.log("Posts fetched successfully:", data); setPosts(data.result); // 假设API返回的数据结构是 { result: [...] } } catch (err) { // fetcher抛出的所有错误（网络错误或HTTP错误）都将在这里被捕获 console.error("Failed to fetch posts:", err); // 根据错误类型，可以显示不同的用户提示 // 例如：if (err.message === "Unauthorized") { redirectToLogin(); } } }; getPosts(); }, []); // 空依赖数组表示只在组件挂载时执行一次
使用fetcher的优势：
- 集中式错误处理: 所有API请求的错误处理逻辑都封装在fetcher中，避免了在每个组件中重复编写相同的错误检查代码。
- 更详细的错误信息: fetcher能够解析HTTP错误响应的JSON体，从而提供更具体的错误原因，这对于调试和用户反馈都非常有价值。
- 代码简洁性: 组件中的数据获取逻辑变得更加清晰，只关注如何使用获取到的数据，而不是如何处理各种边缘错误情况。
- 可维护性: 当API的错误响应格式发生变化时，只需修改fetcher.js一个文件，而无需改动所有调用fetch的组件。
- 一致性: 确保所有API请求都遵循相同的错误处理标准。
注意事项与最佳实践
- 错误响应体结构: 确保您的后端API在返回错误时，其响应体是可预测的JSON格式。例如，{ “code”: 401, “message”: “Unauthorized” }。这样fetcher才能正确解析并抛出有意义的错误对象。
- Token管理: 在实际应用中，AuthContext.getToken()等认证逻辑需要妥善实现，确保令牌的安全性、刷新机制和过期处理。
- 加载状态和ui反馈: 在fetch请求发起时，通常需要设置一个加载状态（isLoading），并在请求完成（无论成功或失败）后解除加载状态，同时根据结果显示成功消息或错误提示给用户。
- 取消请求: 对于长时间运行或可能被用户提前中断的请求，可以考虑使用AbortController来取消fetch请求，以避免不必要的资源消耗和状态更新。
- 开发与生产环境差异: fetcher中的process.env.NODE_ENV判断是一个很好的实践，它允许您在开发时输出详细日志，而在生产环境中保持安静或将错误发送到专门的错误监控服务。
总结
通过构建和使用一个自定义的fetcher工具函数，我们可以显著提升React应用中API请求的健壮性和可维护性。它解决了fetch API在处理HTTP错误时的默认局限性，提供了一个集中、统一且详细的错误处理机制。这种模式不仅让组件代码更加整洁，也使得错误调试更加高效，最终为用户提供了更稳定、更友好的应用体验。在任何需要频繁与后端API交互的React项目中，采用这种封装模式都是一个值得推荐的最佳实践。