封装 fetch 成类 axios 工具库的核心是统一配置、响应解析、错误拦截及请求/响应拦截器，支持默认选项、promise 封装、快捷方法与取消请求，轻量无依赖，适合中小型项目或学习 http 机制。
封装 fetch 成类似 axios 的工具库，核心是统一处理请求配置、响应解析、错误拦截、请求/响应拦截器、默认选项和 Promise 封装。它不依赖第三方库，轻量可控，适合中小型项目或想深入理解 HTTP 请求机制的场景。
基础封装：支持默认配置与 Promise 包装
先剥离原生 fetch 的冗余操作（如手动检查 response.ok、手动 json() 解析），返回标准化的 Promise：
- 自动将响应体转为 JSON（可选其他格式如 text/blob）
- 对非 2xx 状态码主动 reject，避免“成功但业务失败”的隐式错误
- 允许传入默认 baseURL、headers、timeout 等配置
示例：
function createRequest(defaultConfig = {}) {
return async (url, options = {}) => {
const config = { ...defaultConfig, ...options };
const { baseURL = '', timeout = 10000, headers = {} } = config;
const fullUrl = baseURL ? new URL(url, baseURL).href : url;
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const res = await fetch(fullUrl, {
method: 'GET',
headers: { 'Content-Type': 'application/json', ...headers },
signal: controller.signal,
...config
});
clearTimeout(id);
if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
const data = await res.json();
return { data, status: res.status, headers: res.headers };
} catch (err) {
clearTimeout(id);
if (err.name === 'AbortError') throw new Error('Request timeout');
throw err;
}
};
}
const request = createRequest({ baseURL: '/api' });
request('/users').then(({ data }) => console.log(data));
添加拦截器机制：请求前 & 响应后处理
拦截器是 axios 的关键能力。可用数组存储函数，按顺序执行并支持链式传递（类似中间件）：
- 请求拦截器：添加 token、序列化参数、日志、修改 headers/url
-
响应拦截器：统一处理登录过期（401）、业务错误码、数据脱壳（如
{ code: 0, data: {...} }） - 每个拦截器函数返回新配置或新响应，或抛出错误中断流程
实现示意（精简版）：
class EasyRequest {
constructor(defaultConfig) {
this.defaults = defaultConfig;
this.interceptors = {
request: [],
response: []
};
}
use(type, onFulfilled, onRejected) {
this.interceptors[type].push({ onFulfilled, onRejected });
}
async request(url, options = {}) {
let config = { ...this.defaults, ...options };
let currentUrl = url;
// 执行请求拦截器
for (const { onFulfilled } of this.interceptors.request) {
if (onFulfilled) {
const result = await onFulfilled({ url: currentUrl, config });
if (result && typeof result === 'object') {
currentUrl = result.url || currentUrl;
config = { ...config, ...result.config };
}
}
}
try {
const res = await fetch(currentUrl, config);
let response = { data: await res.json(), status: res.status, headers: res.headers };
// 执行响应拦截器
for (const { onFulfilled } of this.interceptors.response) {
if (onFulfilled) response = await onFulfilled(response) || response;
}
return response;
} catch (err) {
for (const { onRejected } of this.interceptors.response) {
if (onRejected) err = await onRejected(err) || err;
}
throw err;
}
}
}
// 使用示例
const http = new EasyRequest({ baseURL: '/api' });
http.use('request', (ctx) => ({
url: ctx.url,
config: {
headers: {
...ctx.config.headers,
Authorization: localStorage.getItem('token')
}
}
}));
http.use('response', (res) => {
if (res.data?.code !== 0) throw new Error(res.data?.msg || '请求失败');
return { ...res, data: res.data?.data }; // 脱壳
});
补充实用功能：get/post 快捷方法 + 取消请求
像 axios 一样提供语义化方法，并支持 AbortController 实现取消（尤其用于防重复提交、页面卸载清理）：
-
http.get(url, { params })自动拼接 query 字符串 -
http.post(url, data)自动设置Content-Type并序列化 body -
http.cancel(token)或返回带cancel方法的 Promise
例如 post 方法内部可自动处理：
post(url, data, config = {}) {
const body = typeof data === 'object' ? JSON.stringify(data) : data;
return this.request(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...config.headers },
body,
...config
});
}
进阶建议：类型提示 + 错误分类 + 中间件生态
若项目使用 TypeScript，可为 request、拦截器函数、响应结构添加泛型接口，提升开发体验；错误可细分：NetworkError、TimeoutError、BusinessError，便于上层 catch 分流处理；长期维护可抽象成插件系统（如 http.use(authPlugin)），让团队按需组合能力。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
