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

  • 记录–通过Promise实现分批处理接口请求已关闭评论
  • 32 次浏览
  • A+
所属分类:Web前端
摘要

【注】:这里的 httpRequest 请根据自己项目而定,比如我的项目是uniapp,里面的http请求是 uni.request,若你的项目是 axios 或者 ajax,那就根据它们来对 BatchHttp 中的某些部分进行相应的修改


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

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

如何通过 Promise 实现百条接口请求?
实际项目中遇到需要批量发起上百条接口请求怎么办?

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

前言

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

源码在此!

  • 【注】:这里的 httpRequest 请根据自己项目而定,比如我的项目是uniapp,里面的http请求是 uni.request,若你的项目是 axios 或者 ajax,那就根据它们来对 BatchHttp 中的某些部分进行相应的修改

    • 比如:其中的 cancelAll() 函数,若你的 http 取消请求的方式不同,那么这里取消请求的功能就需要相应的修改,若你使用的是 fetch 请求,那除了修改 cancelAll 功能之外,singleRequest 中收集请求任务的方式也要修改,因为 fetch 是不可取消的,需要借助 AbortController 来实现取消请求的功能,
    • 提示一下,不管你用的是什么请求框架,你都可以自己二次封装一个 request.js,功能就仿照 axios 这种,返回的对象中包含一个 abort() 函数即可,那么这份 BatchHttp 也就能适用啦
  • BatchHttp.js

// 注:这里的 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 = []     } }

调用案例在此!

  • 由于我的项目是uni-app这种,方便起见,我就直接贴上在 uni-app 的页面 vue 组件中的使用案例

  • 案例代码仅展示关键部分,所以比较粗糙,看懂参考即可

<template> 	<view v-for="item of list" :key="item.key"> 		<image :src="item.url"></image> 	</view> 	</template> 	<script> 	import { BatchHttp } from '@/utils/BatchHttp.js' 	 	export default { 		data() { 			return { 				isLoaded: false, 				batchHttpInstance: null, 				list:[] 			} 		}, 		onLoad(options) { 			this.queryList() 		}, 		onShow() { 			// 第一次进页面时,onLoad 和 onShow 都会执行,onLoad 中 getList 已调用 batchQueryUrl,这里仅对缓存页面后再次进入该页面有效 			if(this.isLoaded) { 				// 为了实现继续请求上一次可能未完成的批量请求,再次进入该页面时,会检查是否存在未完成的任务,若存在则继续发起批量请求 				this.batchQueryUrl(this.dataList) 			} 			this.isLoaded = true 		}, 		onHide() { 			// 页面隐藏时,会直接取消所有批量请求任务,避免占用资源(下次进入该页面会检查未完成的批量请求任务并执行继续功能) 			this.cancelBatchQueryUrl() 		}, 		onUnload() { 			// 页面销毁时,直接取消批量请求任务 			this.cancelBatchQueryUrl() 		}, 		onBackPress() { 			// 路由返回时,直接取消批量请求任务(虽然路由返回也会执行onHide事件,但是无所胃都写上,会判断当前有没有任务的) 			this.cancelBatchQueryUrl() 		}, 		methods: { 			async queryList() { 				// 接口不方法直接贴的,这里是模拟的列表接口 				const res = await mockHttpRequest() 				this.list = res.data  				// 发起批量请求 				// 用 nextTick 也行,只要确保批量任务在列表dom已挂载完成之后执行即可 				setTimeout(()=>{this.batchQueryUrl(resData)},0) 			}, 			/** 			 * 批量处理图片url的接口请求 			 * @param {*} data  			 */ 			 batchQueryUrl(items) { 				let batchHttpInstance = this.batchHttpInstance 				// 判定当前是否有正在执行的批量请求任务,有则直接全部取消即可 				if(!!batchHttpInstance) { 					batchHttpInstance.cancelAll() 					this.batchHttpInstance = null 					batchHttpInstance = null 				} 				// 实例化对象 				batchHttpInstance = new BatchHttp() 				// 设置过滤数据的属性名(用于实现继续任务功能) 				batchHttpInstance.setPassFlagProp('url') // 实现回到该缓存页面是能够继续批量任务的关键一步 <----- 				const reqOptions = { url: '/api/product/url' } 				batchHttpInstance.exec({items, reqOptions, chunkCallback:(ress)=>{ 					let newDataList = this.dataList 					for(const r of ress) { 						newDataList = newDataList.map(d => d.feId === r['sourceItem'].feId ? {...d,url:r['res'].msg} : d) 					} 					 					this.dataList = newDataList 				}})  				this.batchHttpInstance = batchHttpInstance 			}, 			/** 			 * 取消批量请求 			 */ 			cancelBatchQueryUrl() { 				if(!!this.batchHttpInstance) { 					this.batchHttpInstance.cancelAll() 					this.batchHttpInstance = null 				} 			}, 		} 	} 	</script>

本文转载于:

https://juejin.cn/post/7306331039843270667

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

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