记录--通过Promise实现分批处理接口请求

铁路王帅

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

如何通过 Promise 实现百条接口请求？

实际项目中遇到需要批量发起上百条接口请求怎么办？

最新案例代码在此！点击看看

前言

• 不知你项目中有没有遇到过这样的情况，反正我的实际工作项目中真的遇到了这种玩意，一个接口获取一份列表，列表中的每一项都有一个属性需要通过另一个请求来逐一赋值，然后就有了这份封装
  
• 真的是很多功能都是被逼出来的
  
• 这份功能中要提醒一下：批量请求最关键的除了分批功能之外，适当得取消任务和继续任务也很重要，比如用户到了这个页面后，正在发起百条数据请求，但是这些批量请求还没完全执行完，用户离开了这个页面，此时就需要取消剩下正在发起的请求了，而且如果你像我的遇到的项目一样，页面还会被缓存，那么为了避免用户回到这个页面，所有请求又重新发起一遍的话，就需要实现继续任务的功能，其实这个继续任务比断点续传简单多了，就是过滤到那些已经赋值的数据项就行了
  
• 如果看我啰啰嗦嗦一堆烂东西没看明白的话，就直接看下面的源码吧
  

源码在此！

• 【注】：这里的 httpRequest 请根据自己项目而定，比如我的项目是uniapp，里面的http请求是 uni.request，若你的项目是 axios 或者 ajax，那就根据它们来对 BatchHttp 中的某些部分进行相应的修改
  
• 
  
  
  
  • 比如：其中的 cancelAll() 函数，若你的 http 取消请求的方式不同，那么这里取消请求的功能就需要相应的修改，若你使用的是 fetch 请求，那除了修改 cancelAll 功能之外，singleRequest 中收集请求任务的方式也要修改，因为 fetch 是不可取消的，需要借助 AbortController 来实现取消请求的功能，
    
  
  
• 
  
  
  
  • 提示一下，不管你用的是什么请求框架，你都可以自己二次封装一个 request.js，功能就仿照 axios 这种，返回的对象中包含一个 abort() 函数即可，那么这份 BatchHttp 也就能适用啦
    
  
  
• BatchHttp.js
  

1. // 注：这里的 httpRequest 请根据自己项目而定，比如我的项目是uniapp，里面的http请求是 uni.request，若你的项目是 axios 或者 ajax，那就根据它们来对 BatchHttp 中的某些部分
2. import httpRequest from './httpRequest.js'
4. /**
5. * 批量请求封装
6. */
7. export class BatchHttp {
9.     /**
10.      * 构造函数
11.      * @param {Object} http - http请求对象（该http请求拦截器里切勿带有任何有关ui的功能，比如加载对话框、弹窗提示框之类）,用于发起请求，该http请求对象必须满足：返回一个包含取消请求函数的对象，因为在 this.cancelAll() 函数中会使用到
12.      * @param {string} [passFlagProp=null] - 用于识别是否忽略某些数据项的字段名（借此可实现“继续上一次完成的批量请求”）；如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
13.      */
14.     constructor(http=httpRequest, passFlagProp=null) {
15.         /** @private @type {Object[]} 请求任务数组 */
16.         this.resTasks = []
17.         /** @private @type {Object} uni.request对象 */
18.         this.http = http
19.         /** @private @type {boolean} 取消请求标志 */
20.         this.canceled = false
21.         /** @private @type {string|null} 识别跳过数据的属性 */
22.         this.passFlagProp = passFlagProp
23.     }
26.     /**
27.      * 将数组拆分成多个 size 长度的小数组
28.      * 常用于批量处理控制并发等场景
29.      * @param {Array} array - 需要拆分的数组
30.      * @param {number} size - 每个小数组的长度
31.      * @returns {Array} - 拆分后的小数组组成的二维数组
32.     */
33.     #chunk(array, size) {
34.         const chunks = []
35.         let index = 0
36.    
37.         while(index < array.length) {
38.         chunks.push(array.slice(index, size + index))
39.         index += size;
40.         }
41.    
42.         return chunks
43.     }
45.     /**
46.      * 单个数据项请求
47.      * @private
48.      * @param {Object} reqOptions - 请求配置
49.      * @param {Object} item - 数据项
50.      * @returns {Promise} 请求Promise
51.     */
52.     #singleRequest(reqOptions, item) {
53.         return new Promise((resolve, _reject) => {
54.             const task = this.http({
55.                 url: reqOptions.url,
56.                 method: reqOptions.method || 'GET',
57.                 data: reqOptions.data,
58.                 success: res => {
59.                     resolve({sourceItem:item, res})
60.                 }
61.             })
62.             this.resTasks.push(task)
63.         })
64.     }
66.     /**
67.      * 批量请求控制
68.      * @private
69.      * @async
70.      * @param {Object} options - 函数参数项
71.      * @param {Array} options.items - 数据项数组
72.      * @param {Object} options.reqOptions - 请求配置  
73.      * @param {number} [options.concurrentNum=10] - 并发数
74.      * @param {Function} [options.chunkCallback] - 分块回调
75.      * @returns {Promise}
76.     */
77.     async #batchRequest({items, reqOptions, concurrentNum = 10, chunkCallback=(ress)=>{}}) {
78.         const promiseArray = []
79.         let data = []
80.         const passFlagProp = this.passFlagProp
81.         if(!passFlagProp) {
82.             data = items
83.         } else {
84.             // 若设置独立 passFlagProp 值，则筛选出对应属性值为空的数据（避免每次都重复请求所有数据，实现“继续未完成的批量请求任务”）
85.             data = items.filter(d => !Object.hasOwnProperty.call(d, passFlagProp) || !d[passFlagProp])
86.         }
87.         // --
88.         if(data.length === 0) return
90.         data.forEach(item => {
91.             const requestPromise = this.#singleRequest(reqOptions, item)
92.             promiseArray.push(requestPromise)
93.         })
95.         const promiseChunks = this.#chunk(promiseArray, concurrentNum) // 切分成 n 个请求为一组
97.         for (let ck of promiseChunks) {
98.             // 若当前处于取消请求状态，则直接跳出
99.             if(this.canceled) break
100.             // 发起一组请求
101.             const ckRess = await Promise.all(ck) // 控制并发数
102.             chunkCallback(ckRess) // 每完成组请求，都进行回调
103.         }
104.     }
106.     /**
107.      * 设置用于识别忽略数据项的字段名
108.      * （借此参数可实现“继续上一次完成的批量请求”）；
109.      * 如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
110.      * @param {string} val
111.      */
112.     setPassFlagProp(val) {
113.         this.passFlagProp = val
114.     }
116.     /**
117.      * 执行批量请求操作
118.      * @param {Object} options - 函数参数项
119.      * @param {Array} options.items - 数据项数组
120.      * @param {Object} options.reqOptions - 请求配置  
121.      * @param {number} [options.concurrentNum=10] - 并发数
122.      * @param {Function} [options.chunkCallback] - 分块回调
123.      */
124.     exec(options) {
125.         this.canceled = false
126.         this.#batchRequest(options)
127.     }
129.     /**
130.      * 取消所有请求任务
131.      */
132.     cancelAll() {
133.         this.canceled = true
134.         for(const task of this.resTasks) {
135.             task.abort()
136.         }
137.         this.resTasks = []
138.     }
139. }

复制代码

调用案例在此！

• 由于我的项目是uni-app这种，方便起见，我就直接贴上在 uni-app 的页面 vue 组件中的使用案例
  
• 案例代码仅展示关键部分，所以比较粗糙，看懂参考即可
  

1. <template>
2.         <view v-for="item of list" :key="item.key">
3.                 <image :src="item.url"></image>
4.         </view>
5.         </template>
6.        

复制代码

本文转载于:

https://juejin.cn/post/7306331039843270667

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17941057
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！