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

场景

组件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); // 删除请求任务
        })
    }
    ...
}