JavaScript使用Promise实现分批处理接口请求

// 注：这里的 httpRequest 请根据自己项目而定，比如我的项目是uniapp，里面的http请求是 uni.request，若你的项目是 axios 或者 ajax，那就根据它们来对 BatchHttp 中的某些部分
import httpRequest from './httpRequest.js'

/**
 * 批量请求封装
 */
export class BatchHttp {

    /** 
     * 构造函数 
     * @param {Object} http - http请求对象（该http请求拦截器里切勿带有任何有关ui的功能，比如加载对话框、弹窗提示框之类）,用于发起请求，该http请求对象必须满足：返回一个包含取消请求函数的对象，因为在 this.cancelAll() 函数中会使用到
     * @param {string} [passFlagProp=null] - 用于识别是否忽略某些数据项的字段名（借此可实现“继续上一次完成的批量请求”）；如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
     */ 
    constructor(http=httpRequest, passFlagProp=null) {
        /** @private @type {Object[]} 请求任务数组 */
        this.resTasks = []
        /** @private @type {Object} uni.request对象 */
        this.http = http
        /** @private @type {boolean} 取消请求标志 */
        this.canceled = false
        /** @private @type {string|null} 识别跳过数据的属性 */
        this.passFlagProp = passFlagProp
    }


    /**
     * 将数组拆分成多个 size 长度的小数组
     * 常用于批量处理控制并发等场景
     * @param {Array} array - 需要拆分的数组
     * @param {number} size - 每个小数组的长度
     * @returns {Array} - 拆分后的小数组组成的二维数组
    */
    #chunk(array, size) {
        const chunks = []
        let index = 0
    
        while(index < array.length) {
        chunks.push(array.slice(index, size + index))
        index += size;
        }
    
        return chunks
    }

    /** 
     * 单个数据项请求 
     * @private
     * @param {Object} reqOptions - 请求配置
     * @param {Object} item - 数据项 
     * @returns {Promise} 请求Promise
    */
    #singleRequest(reqOptions, item) {
        return new Promise((resolve, _reject) => {
            const task = this.http({
                url: reqOptions.url, 
                method: reqOptions.method || 'GET',
                data: reqOptions.data,
                success: res => {
                    resolve({sourceItem:item, res})
                }
            })
            this.resTasks.push(task)
        })
    }

    /**
     * 批量请求控制
     * @private
     * @async
     * @param {Object} options - 函数参数项
     * @param {Array} options.items - 数据项数组
     * @param {Object} options.reqOptions - 请求配置  
     * @param {number} [options.concurrentNum=10] - 并发数
     * @param {Function} [options.chunkCallback] - 分块回调 
     * @returns {Promise}
    */
    async #batchRequest({items, reqOptions, concurrentNum = 10, chunkCallback=(ress)=>{}}) {
        const promiseArray = []
        let data = []
        const passFlagProp = this.passFlagProp
        if(!passFlagProp) {
            data = items
        } else {
            // 若设置独立 passFlagProp 值，则筛选出对应属性值为空的数据（避免每次都重复请求所有数据，实现“继续未完成的批量请求任务”）
            data = items.filter(d => !Object.hasOwnProperty.call(d, passFlagProp) || !d[passFlagProp])
        }
        // --
        if(data.length === 0) return

        data.forEach(item => {
            const requestPromise = this.#singleRequest(reqOptions, item)
            promiseArray.push(requestPromise)
        })

        const promiseChunks = this.#chunk(promiseArray, concurrentNum) // 切分成 n 个请求为一组

        for (let ck of promiseChunks) {
            // 若当前处于取消请求状态，则直接跳出
            if(this.canceled) break
            // 发起一组请求
            const ckRess = await Promise.all(ck) // 控制并发数
            chunkCallback(ckRess) // 每完成组请求，都进行回调
        }
    }

    /**
     * 设置用于识别忽略数据项的字段名
     * （借此参数可实现“继续上一次完成的批量请求”）；
     * 如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
     * @param {string} val 
     */
    setPassFlagProp(val) {
        this.passFlagProp = val
    }

    /**
     * 执行批量请求操作
     * @param {Object} options - 函数参数项
     * @param {Array} options.items - 数据项数组
     * @param {Object} options.reqOptions - 请求配置  
     * @param {number} [options.concurrentNum=10] - 并发数
     * @param {Function} [options.chunkCallback] - 分块回调 
     */
    exec(options) {
        this.canceled = false
        this.#batchRequest(options)
    }

    /**
     * 取消所有请求任务
     */
    cancelAll() {
        this.canceled = true
        for(const task of this.resTasks) {
            task.abort()
        }
        this.resTasks = []
    }
}