220字 1.1分钟
Code在现代 Web 开发中，Fetch API 已经可以完全替代 Ajax，是处理 HTTP 请求的利器，且支持异步操作和 Promise 链式调用。 本文将详细介绍如何使用 Fetch API 封装 GET 和 POST 请求。通过封装，代码可复用性更高，逻辑更清晰，同时还能简化错误处理和请求配置，大大提升开发效率和代码质量。
GET 请求封装
const $GET = async (url: string, headers: Record<string, string> = {}): Promise<any> => {
try {
const res = await fetch(url, { method: "GET", headers: headers });
if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
return res.json();
} catch (error) {
console.error("GET request failed:", error);
}
};POST 请求封装
const $POST = async (url: string, data: Record<string, any>, headers: Record<string, string> = {}): Promise<any> => {
try {
const res = await fetch(url, { method: "POST", headers: { ...headers }, body: JSON.stringify(data) });
if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
return res.json(); // 解析 JSON 数据
} catch (error) {
console.error("POST request failed:", error);
}
};