🌐 前端开发必备：Fetch GET 与 POST 请求封装实践与进阶优化
🚀 优雅处理 HTTP 请求，从封装 Fetch 开始
随着现代 Web 开发的发展，Fetch API 已成为处理 HTTP 请求的主流方式。相比传统的 XMLHttpRequest，Fetch 更加简洁、语义清晰，并且天然支持 Promise 和 async/await，极大提升了异步代码的可读性。
但在实际开发中，我们往往需要重复配置 headers、捕获异常、处理返回数据，代码重复度高、维护成本大。因此，本文将带你从 基础封装 到 进阶增强，一步步构建你自己的 Fetch 请求工具库。
🧱 为什么要封装 Fetch？
使用原始 Fetch 的痛点：
const res = await fetch("/api/user", { method: "GET" });
if (!res.ok) throw new Error("请求失败");
const data = await res.json();
看起来简单？但实际项目中你会频繁：
- 添加 headers（如 Token、Content-Type）
- 判断 status、统一处理错误
- 加 loading 状态
- 多处复制粘贴相似逻辑
为了提升开发效率、降低重复度、提高维护性，我们有必要对 Fetch 进行封装。
📦 一步步封装 GET 和 POST 请求
✅ GET 请求封装
const $GET = async (
url: string,
headers: Record<string, string> = {}
): Promise<any> => {
try {
const res = await fetch(url, {
method: "GET",
headers,
});
if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
return await res.json();
} catch (error) {
console.error("GET request failed:", error);
throw error;
}
};
✅ POST 请求封装
const $POST = async (
url: string,
data: Record<string, any>,
headers: Record<string, string> = { "Content-Type": "application/json" }
): Promise<any> => {
try {
const res = await fetch(url, {
method: "POST",
headers,
body: JSON.stringify(data),
});
if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
return await res.json();
} catch (error) {
console.error("POST request failed:", error);
throw error;
}
};
🧪 使用示例
获取用户信息
$GET("https://api.example.com/user")
.then(data => console.log("用户信息：", data))
.catch(err => alert("获取失败"));
登录请求
$POST("https://api.example.com/login", {
username: "admin",
password: "123456"
})
.then(res => console.log("登录成功", res))
.catch(err => alert("登录失败"));
🔧 进阶增强：更实用的封装建议
1. 自动附加 Token
const getToken = () => localStorage.getItem("token");
const withAuthHeader = (headers: Record<string, string> = {}) => ({
...headers,
Authorization: `Bearer ${getToken()}`,
});
将其集成进封装函数中：
const $GET = async (url: string, headers = {}) =>
fetch(url, {
method: "GET",
headers: withAuthHeader(headers),
});
2. 统一错误处理
你可以在封装函数中加入状态码判断逻辑，例如：
if (res.status === 401) {
// 跳转登录页或刷新 token
}
或者配合全局处理：
window.addEventListener("unhandledrejection", event => {
alert("系统异常：" + event.reason?.message || "未知错误");
});
3. 添加 Loading 状态（可选）
配合前端框架如 React/Vue，你可以用 loading 状态管理器（如 Zustand、Pinia）在请求前后自动控制加载 UI。
✅ 总结
封装 HTTP 请求，是前端项目中提高代码质量与维护效率的重要实践。本文基于 Fetch API，提供了：
- GET 与 POST 的基础封装方法；
- 错误处理、Token 附加、Loading 控制等增强技巧；
- 实用开发建议，助你构建更优雅的网络请求工具库。
从今天起，告别冗余的 fetch 请求，写出更专业的前端代码！