首页 > 教程

Fetch的GET、POST简单HTTP请求封装

slbcun
2025-04-07
978 ℃

在现代 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);
	}
};