request-combo
这是一个前端简易版接口聚合模块,主要用于以下场景:
一个支持参数合并的接口,在组件化或其他场景下调用了不同参数的相同的接口,这时把这些调用合并成一个或多个接口再请求。
避免发起相同的请求,某些情况下发起了相同的请求,经收集处理后,实际只发起一个请求。但是不同的发起端的callback 都能得到处理。
主要逻辑设计
要知道接口的基本信息,包括但不限于 url、params、callback…
既然要聚合,那么得有一个收集接口的队列
每个接口的队列要有状态,当一个新接口到来时,该接口的队列可能还没创建,可能正在收集,可能刚发完请求。
要有接口队列发起请求的条件,收集时间够了或者收集长度够了…
有缓存机制,已获取的数据暂时缓存起来
API 设计
调用方法:requestCombo() 参数:
apiData: ApiData,
params: object,
callback: Function,
request = axios,
collectTime = 100,
isCombo = true,
errorHandle?: Function
复制代码
ApiData 类型中包含以下内容:
params Description Type Example url 接口地址 string http:xxx/api pack 参数合并逻辑函数 function fn unpack 数据拆解逻辑函数 function fn maxComboNum 接口最大收集次数 number 10 requestMethod 当前请求类型 string ‘get’ 具体实现
import axios from ‘axios’;
interface ApiData {
url: string;
pack: Function;
unpack: Function;
maxComboNum?: number;
requestMethod?: string;
}
/**
- status: number
- 0:init
- 1:pending
- 2:done
- request
- The api must be the same as axios
*/
const dataCache: object = {};
const busData: object = {};
export const requestCombo = (apiData: ApiData, params: object, callback?: Function, request = axios, collectTime = 100, isCombo = true, errorHandle?: Function) => {
const { url, requestMethod = ‘get’, maxComboNum = 10, pack, unpack } = apiData;
const method: string = requestMethod.toLocaleLowerCase();
const cacheKey =${url}_${method}_${JSON.stringify(params)}
;
const busKey =${url}_${method}
;
if (!url) return;
const sendRequest = async () =