sluggard-http
v1.3.4
Published
基于 axios 的多功能请求库,与 axios 使用方式完全兼容,并提供自定义请求别名功能与多种请求控制方法。
Downloads
12
Maintainers
Readme
sluggard-http
✨ 请确保项目已安装 axios 依赖
文档地址 👇
https://www.wem3.cn/sluggard/sluggard-http/
基于 axios 的多功能请求库,与 axios 使用方式完全兼容,并提供自定义请求别名功能与多种请求控制方法。
快速开始
- 使用
Http.create()
( 与axios.create()
基本相同 ) 来创建实例 - 用法可参考 axios 文档 The Axios Instance
Http.create()
的第一个参数与axios.create()
的config
参数一致, 第二个参数为 sluggard-http自定义请求别名
和进度生命周期
功能的配置项。
// import axios from 'axios'
import { Http } from 'sluggard-http'
// export const http = axios.create({
export const http = Http.create(
{
baseURL: '...',
timeout: 1000,
headers: {'Authorization': '...'}
},
// 新增配置项
{
// 自定义请求别名
methodAlias: {
download: {
axiosMethod: 'post',
handle: (url: string, data: any, config: RequestConfig) => {
return [url, data, { ...config, responseType: 'blob' }]
},
},
},
// 进度生命周期
life: {
begin: () => {
NProgress.start()
},
end: () => {
NProgress.done()
},
},
}
)
内置功能 - 自定义请求别名
支持添加自定义的请求别名或重构已有别名,用来对请求进行统一处理。
e.g. 新增 download
别名
- 新增一个
download
别名,使用此别名时调用post
方法,并自动携带responseType: 'blob'
// 配置
const methodAlias: MethodAlias = {
download: {
axiosMethod: 'post',
handle: (url: string, data: any, config: RequestConfig) => {
return [url, data, { ...config, responseType: 'blob' }]
},
},
}
// 使用
http.download(url, data, config)
e.g. 新增 data
别名
- 新增一个
data
别名,使用此别名时调用post
方法,并自动判断响应体中code
字段是否为200
,是则直接返回响应体中的data
字段数据
// 配置
const methodAlias: MethodAlias = {
data: {
axiosMethod: 'post',
handle: (url: string, data: any, config: RequestConfig) => {
return [url, data, { ...config, postType: "postData" }]
},
},
}
// 相应拦截
http.interceptorsResponseUse((response) => {
if (
response.config.postType === 'postData'
&& response.data.code === 200
){
return response.data.data
}
return response
})
// 使用
http.data(url, data, config)
e.g. 重构 post
别名
- 重构 axios 的
post
别名,增加 <清除请求体数据中字符串类型字段
数据的前后空格> 的功能
// 配置
const methodAlias: MethodAlias = {
post: {
axiosMethod: 'post',
handle: (url: string, data: any, config: RequestConfig) => {
clearTrim(config)
return [url, data, config]
},
},
}
// 使用
http.post(url, data, config)
内置功能 - 多种请求控制
支持
请求更新
、全局请求清除
、请求拦截
功能
请求更新
- 在当前请求处于
进行中
时,若发起相同
请求,则会触发请求更新,取消
之前未完成的请求,避免重复请求
// 使用
export async function getList(data: any) {
const httpRes = await http.post("/getList", data, {
updateLevel: "path",
});
return httpRes;
}
全局请求清除
- 清除并
取消
当前所有的请求,往往在路由变化
时使用,避免请求资源的浪费
router.afterEach(() => {
http.clearPending();
});
请求拦截
- 对还在
进行中
的指定请求进行拦截,并取消
请求
// 使用 拦截标识符 拦截请求
const { abortSignUuidCode } = http.post("/getList", { size: 10, current: 1 })
http.abortPending(abortSignUuidCode)
// 无法获取拦截标识符时的解决方案
http.abortPending(["post", "/getList", { size: 10, current: 1 }]);
内置功能 - 进度生命周期
sluggard-http 支持在
单个请求开始
/全部请求结束
时抛出钩子函数 常与NProgress
等进度条插件配合使用
import NProgress from "nprogress";
import { Http } from 'sluggard-http'
export const http = Http.create(
{
baseURL: '...',
timeout: 1000,
headers: {'Authorization': '...'}
},
{
methodAlias: { ... },
life: {
begin: () => { // 有请求开始时触发
NProgress.start()
},
end: () => { // 全部请求结束时触发
NProgress.done()
},
},
}
)