开发背景
最近在封装高德地图选择功能时，我遇到了一个需求：在请求过程中能够随时中止请求。虽然可以通过修改 AbortController 实现这一点，但是害怕到时候变动太多, 不想去修改, 然后我就想如果可以不用修改api封装就可以实现终止请求是不是可以大大的减少维护成本。因此, 我我决定开发一个新的HTTP请求库——jsonlee-fetch，基于 fetch ，并提供类似于 axios 的使用体验，同时大大简化请求中止的操作, 因为 axios 用户太多, 因此我这个库的用法是基于 axios 的用法来开发的, 大大降低了 axios 用户的迁移问题和学习成本。
项目特点
- 流处理支持：
jsonlee-fetch内置了对流处理的支持，可以方便地处理流式响应数据。 - 更简洁的请求中止方法：通过调用请求实例的
abort方法即可终止请求，操作简单明了。 - 与axios类似的API：
jsonlee-fetch提供了与axios类似的API，使得从axios迁移到jsonlee-fetch变得非常简单。 - 基于fetch：享有fetch的所有优势，如原生支持、良好的浏览器兼容性等。
安装和使用
安装
你可以通过npm或yarn安装jsonlee-fetch：
npm install jsonlee-fetch
或
yarn add jsonlee-fetch
快速开始
import JFetch from 'jsonlee-fetch';
const jfetch = new JFetch({ baseURL: 'https://api.example.com' });
// 发送GET请求
jfetch.get('/data')
.then(response => console.log(response))
.catch(error => console.error(error));
// 发送POST请求
jfetch.post('/data', { key: 'value' })
.then(response => console.log(response))
.catch(error => console.error(error));
// 中止请求
const request = jfetch.get('/long-request');
setTimeout(() => {
request.abort();
console.log('Request aborted');
}, 1000);
API文档
构造函数
const jfetch = new JFetch({
baseURL: 'https://api.example.com',
headers: {
'Content-Type': 'application/json',
},
timeout: 5000,
});
请求方法
jsonlee-fetch提供了与axios类似的请求方法：
get
jfetch.get<T, P>(url: string, params?: P, options?: Omit<JFetchOptions, 'params' | 'baseURL'>): JFetchAbortablePromise<T>
post
jfetch.post<T, D>(url: string, data?: D, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
put
jfetch.put<T, D>(url: string, data?: D, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
delete
jfetch.delete<T>(url: string, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
patch
jfetch.patch<T, D>(url: string, data?: D, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
head
jfetch.head<T, P>(url: string, params?: P, options?: Omit<JFetchOptions, 'params' | 'baseURL'>): JFetchAbortablePromise<T>
options
jfetch.options<T, P>(url: string, params?: P, options?: Omit<JFetchOptions, 'params' | 'baseURL'>): JFetchAbortablePromise<T>
静态方法
jsonlee-fetch还提供了一些静态方法，便于无需实例化即可使用：
request
JFetch.request<T = any>(url: string, options?: JFetchOptions): JFetchAbortablePromise<T>
get
JFetch.get<T = any, P = any>(url: string, params?: P, options?: Omit<JFetchOptions, 'params' | 'baseURL'>): JFetchAbortablePromise<T>
post
JFetch.post<T = any, D = any>(url: string, data?: D, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
put
JFetch.put<T = any, D = any>(url: string, data?: D, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
delete
JFetch.delete<T = any>(url: string, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
patch
JFetch.patch<T = any, D = any>(url: string, data?: D, options?: Omit<JFetchOptions, 'data' | 'baseURL'>): JFetchAbortablePromise<T>
head
JFetch.head<T = any, P = any>(url: string, params?: P, options?: Omit<JFetchOptions, 'params' | 'baseURL'>): JFetchAbortablePromise<T>
options
JFetch.options<T = any, P = any>(url: string, params?: P, options?: Omit<JFetchOptions, 'params' | 'baseURL'>): JFetchAbortablePromise<T>
中止请求
通过调用请求实例的abort方法可以轻松中止请求：
const req = jfetch.get('/endpoint');
req.abort(); // 中止请求
中止所有请求
通过调用请求实例的abort方法可以轻松中止请求：
jfetch.abortAll();
拦截器
jsonlee-fetch提供了请求和响应拦截器，可以在请求发送前或响应到达后进行处理：
jfetch.requestInterceptor.use(async (config) => {
// 在请求发送前做一些处理
return config;
});
jfetch.responseInterceptor.use(async (response) => {
// 在响应到达后做一些处理
return response;
});
结语
jsonlee-fetch 是一个基于 fetch 的现代 HTTP 请求库，它不仅提供了与 axios 类似的使用体验，还简化了请求中止和流处理。希望这个库能帮助你更轻松地处理 HTTP 请求，并提高开发效率。欢迎大家尝试并提出宝贵意见！
贡献和反馈
欢迎大家贡献代码、报告问题或提出改进建议。你的支持是我们不断改进的动力！
- GitHub仓库: JsonLee12138/frontend-factory
- 提交问题: GitHub Issues
