js需要同时发起百条接口请求怎么办?--通过Promise实现分批处理接口请求

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

前言

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

源码在此!

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

  • 比如:其中的 cancelAll() 函数,若你的 http 取消请求的方式不同,那么这里取消请求的功能就需要相应的修改,若你使用的是 fetch 请求,那除了修改 cancelAll 功能之外,singleRequest 中收集请求任务的方式也要修改,因为 fetch 是不可取消的,需要借助 AbortController 来实现取消请求的功能,

  • 提示一下,不管你用的是什么请求框架,你都可以自己二次封装一个 request.js,功能就仿照 axios 这种,返回的对象中包含一个 abort() 函数即可,那么这份 BatchHttp 也就能适用啦

  • 简单案例测试 -- batch-promise-test.html

      <!DOCTYPE html>
      <html lang="en">
    
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
    
      <body>
    
      </body>
      <script>
    
        /**
         * 批量请求封装
         */
        class BatchHttp {
    
      	/** 
      	 * 构造函数 
      	 * */
      	constructor() {
      	}
    
      	/** 
      	 * 单个数据项请求 
      	 * @private
      	 * @param {Object} reqOptions - 请求配置
      	 * @param {Object} item - 数据项 
      	 * @returns {Promise} 请求Promise
      	*/
      	#singleRequest(item) {
      	  return new Promise((resolve, _reject) => {
      		// 模拟异步请求
      		console.log(`发起模拟异步请求 padding...: 【${item}】`)
      		setTimeout(() => {
      		  console.log(`模拟异步请求 success -- 【 ${item}】`)
      		  resolve()
      		}, 200 + Math.random() * 800)
      	  })
      	}
    
      	#chunk(array, size) {
      	  const chunks = []
      	  let index = 0
    
      	  while (index < array.length) {
      		chunks.push(array.slice(index, size + index))
      		index += size
      	  }
    
      	  return chunks
      	}
    
      	/**
      	 * 批量请求控制
      	 * @private
      	 * @async
      	 * @returns {Promise}
      	*/
      	async #batchRequest() {
      	  const promiseArray = []
      	  let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
    
      	  data.forEach((item, index) => {
      		// 原来的错误逻辑(原来的逻辑,导致所有的 Promise 回调函数都会被直接执行,那么就只有对 response 进行分批的功能了)
      		// const requestPromise = this.#singleRequest(item)
      		// promiseArray.push(requestPromise)
    
      		// -- 修改为:
      		promiseArray.push(index)
      	  })
    
      	  const promiseChunks = this.#chunk(promiseArray, 10) // 切分成 n 个请求为一组
    
      	  let groupIndex = 1
      	  for (let ckg of promiseChunks) {
      		// -- 修改后新增逻辑(在发起一组请求时,收集该组对应的 Promiise 成员)
      		const ck = ckg.map(idx => this.#singleRequest(data[idx]))
      		// 发起一组请求
      		const ckRess = await Promise.all(ck) // 控制并发数
      		console.log(`------ 第${groupIndex}组分批发起完毕 --------`)
      		groupIndex += 1
      	  }
      	}
    
      	/**
      	 * 执行批量请求操作
      	 */
      	exec(options) {
      	  this.#batchRequest(options)
      	}
        }
    
        const batchHttp = new BatchHttp()
        setTimeout(() => {
      	batchHttp.exec()
        }, 2000)
      </script>
    
      </html>
    
  • 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,index) => {
      			// 原来的错误逻辑(原来的逻辑,导致所有的 Promise 回调函数都会被直接执行,那么就只有对 response 进行分批的功能了)
      			// const requestPromise = this.#singleRequest(reqOptions, item)
      			// promiseArray.push(requestPromise)
      			// -- 修改为:这里暂时只记录下想对应的 data 的数组索引,以便分组用,当然这部分有关分组代码还可以进行精简,比如直接使用 data.map进行收集等方式,但是为了与之前错误逻辑形成对比,这篇文章里还是这样写比较完整
      			promiseArray.push(index)
      		})
    
      		const promiseChunks = this.#chunk(promiseArray, concurrentNum) // 切分成 n 个请求为一组
    
      		for (let ckg of promiseChunks) {
      			// -- 修改后新增逻辑(在发起一组请求时,收集该组对应的 Promiise 成员)
      			const ck = ckg.map(idx => this.#singleRequest(data[idx]))
      			// 若当前处于取消请求状态,则直接跳出
      			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>
    

热门相关:情浓大地国语   狂仙   超萌迷糊妻:BOSS大人别这样   Hello,校草大人!   大文豪