前端中的接口聚合

最新推荐文章于 2024-05-29 09:08:04 发布

winty~~

最新推荐文章于 2024-05-29 09:08:04 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/LuckyWinty/article/details/103462294

版权

本文介绍了前端接口聚合模块request-combo，用于合并相同接口的不同参数请求，避免重复请求。主要内容包括模块的主要逻辑设计，如接口队列管理、请求条件判断和缓存机制。此外，还详细讲解了API设计、具体实现，以及如何使用webpack和rollup进行打包，并提供了发布到npm的步骤。

摘要由CSDN通过智能技术生成

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 () => {
    
        clearTimeout(busData[busKey].timer);
        const par