同一个请求发送多次怎么办?合并一下

场景

组件A和组件B,需要根据 id 发送请求获取用户信息并进行不同的处理,它们分别用于不同的模块,这些模块也可以在不同的页面中自由组合。进入页面,几乎同时发送多个相同的请求,入参可能相同也可能不一样。

虽然又不是不能用,但是怎么能忍呢,必须得优化!将它们合并成☝一个请求。

当然,前提是接口能够支持批量请求。

思考

既然组件AB属于兄弟关系,当然可以把批量请求抽取出来,由父组件负责调用并存储数据,这也能用,只是会和父组件耦合,带来一定的维护成本。

能不能让请求逻辑保持在组件A和组件B内部,将它们一定时间段内发出的请求,优雅的合并起来呢?

接口请求是异步的,利用好 Promise 自然能实现😎。

实现

需要具备的功能点有:

  • 缓存来自组件的请求
  • 批量请求参数超过上限时,支持分批请求
  • 缓存批量请求返回的数据
  • 请求回来后,通知对应的组件

问题:

  • 假请求(单独请求)并不是实际发送的请求,当真实请求(批量请求)的数据返回后,如何准确通知对应的单独请求?
  • 批量请求中可能有部分查询失败的结果,如何处理查不到数据的请求?

缓存来自组件的请求

先定义一个用来处理合并请求的类 MergeRequest,请求池和缓存需要全局唯一,因此暴露给外部的实际上是它的单例。

typescript 复制代码
class MergeRequest () {
    public cache = new Map(); // 缓存服务端的数据
    public requestMap = new Map(); // 请求池,缓存来自组件的请求,以及记录请求的状态
}
export const mergeRequest = new MergeRequest()

然后需要有提供给组件发起请求的方法。

javascript 复制代码
class MergeRequest () {
    ...
    fetchData(id) {
        return new Promise((resolve) => {
            this.addRequest(id, resolve);
        })
    }
    ...
}

当组件调用时添加请求任务到请求池中,等待发送。

kotlin 复制代码
class MergeRequest () {
    ...
    getInitRequest() {
        return {
            resovles: [], // 可能会有相同参数的请求,
            status: 'ready',
        }
    }
    
    addRequest(id, resolve) {
        const request = this.resolves.get(id) || this.getInitRequest();
        request.resolves.push(resolve); // 缓存 resolve,当批量请求结果返回时通知组件
        this.resolves.set(id, request);
        this.fetchDataList(); // 发送批量请求
    }
    ...
}

批量请求参数超过上限时,支持分批请求

由于需要支持设置一次请求参数的个数上限,因此每发送一次请求,只获取状态为ready的 id,并将状态修改为pending,避免请求之间参数重复。

kotlin 复制代码
class MergeRequest () {
    ...
    getIds() {
        const ids = [];
        for (const [key, val] of this.requestMap) {
            if (val.status === 'ready') {
                ids.push(key);
                this.requestMap.set(key, { ...val, status: 'pending' })
            }
        }
        return ids;
    }
    ...
}

将批量请求推入微任务队列等待执行。

scss 复制代码
class MergeRequest () {
    ...
    fetchDataList(id) {
        Promise.resolve().then(() => {
            let ids = getIds();
            while (ids.length) {
                this.fetchList(ids);
                ids = getIds();
            }
        )
    }
    ...
}

缓存批量请求返回的数据

当服务端返回数据后,缓存起来,其他组件请求时先查询缓存。

javascript 复制代码
class MergeRequest () {
    ...
    fetchDataList(id) {
        Promise.resolve().then(() => {
            let ids = getIds();
            while (ids.length) {
                this.fetchList(ids).then(list => {
                    this.cacheData(list); // 缓存结果
                });
                ids = getIds();
            }
        )
    }
    
    cacheData(list) {
        list.forEach(item => {
            this.cache.set('id', item)
        })
    }
    
    fetchData(id) {
        // 先查询缓存
        const data = this.cache.get(id)
        if (data) {
            return Promise.resolve(data);
        }
        return new Promise((resolve) => {
            this.addRequest(id, resolve)
        })
    }
    ...
}

请求回来后,通知对应的组件

同时需要通知等待中的组件,并将请求任务从缓存池中移除。

javascript 复制代码
class MergeRequest () {
    ...
    fetchDataList(id) {
        Promise.resolve().then(() => {
            let ids = getIds();
            while (ids.length) {
                this.fetchList(ids).then(list => {
                    this.cacheData(list); // 缓存结果
                    this.flushRequest(); // 通知等待中的组件
                });
                ids = getIds();
            }
        )
    }
    
    flushRequest(list) {
        list.forEach(item => {
            const target = this.requestMap.get(item.id);
            target.resolves.forEach(res => res(item)); // 将数据返回给组件
            this.requestMap.delete(item.id); // 删除请求任务
        })
    }
    ...
}
相关推荐
gqkmiss34 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap