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

这篇具有很好参考价值的文章主要介绍了记录--通过Promise实现分批处理接口请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

记录--通过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实现分批处理接口请求文章来源地址https://www.toymoban.com/news/detail-772348.html

到了这里,关于记录--通过Promise实现分批处理接口请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java通过httpclient携带请求头参数获取第三方文件流接口并实现实现文件下载

    创建httpclient 请求,并在header携带指定key,也可根据实际需要携带token等信息。获取第三方接口返回的文件输入流并写到本地response中,实现返回文件流,前端通过js的a标签进行下载。 代码如下: 前端js代码

    2024年02月16日
    浏览(51)
  • 初探Flink的Java实现流处理和批处理

    端午假期,夏日炎炎,温度连续40度以上,在家学习Flink相关知识,记录下来,方便备查。 开发工具 :IntelliJ Idea Flink版本 :1.13.0 本次主要用Flink实现 批处理 (DataSet API) 和 流处理 (DataStream API)简单实现。 第一步、创建项目与添加依赖 1)新建项目 打开Idea,新建Maven项目

    2024年02月10日
    浏览(53)
  • JDBC怎样实现批处理?【案例演示】

    在实际开发中,经常需要向数据库发送多条SQL语句,这时,如果逐条执行这些SQL语句,效率会很低。为此,JDBC提供了批处理机制,即同时执行多条SQL语句。Statement和PreparedStatement都实现了批处理,本节将针对它们的批处理方式进行详细的讲解。 1.Statement批处理 当向数据库发送

    2024年02月06日
    浏览(37)
  • WEB通讯技术。前端实现SSE长连接,nodejs+express搭建简单服务器,进行接口调试,通过curl请求数据

    长连接(Keep-Alive)是一种HTTP/1.1的持久连接技术,它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应,而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。 长连接的HTTP请求方法与普通HTTP请求方法相同,可以使用GET、P

    2024年02月09日
    浏览(53)
  • React源码解析18(11)------ 实现多次setState的批处理

    在React中,如果涉及到了多次setState,组件render几次。setState是同步的还是异步的。这是一个很常见的面试题。 而本篇文章,就是主要实现React中,对于这部分的性能优化,我们称之为批处理。例如当我有下面的JSX。 对于当前的点击事件来说,只有最后的setNum(num + 3)是有效的。

    2024年02月11日
    浏览(45)
  • 基于Promise.resolve实现Koa请求队列中间件

    本文作者为360奇舞团前端工程师 最近在做一个 AIGC 项目,后端基于 Koa2 实现。其中有一个需求就是调用兄弟业务线服务端 AIGC 能力生成图片。但由于目前兄弟业务线的 AIGC 项目也是处于测试阶段,能够提供的服务器资源有限,当并发请求资源无法满足时,会响应【服务器繁忙

    2024年02月13日
    浏览(37)
  • 接口自动化【一】(抓取后台登录接口+postman请求通过+requests请求通过+json字典区别)

    文章目录 前言 一、requests库的使用 二、json和字典的区别 三、后端登录接口-请求数据生成 四、接口自动化-对应电商项目中的功能 五、来自postman的代码-后端登录 总结 记录:json和字典的区别,json和字段的相互转化;postman发送请求与Python中代码发送请求的区别。 安装: p

    2024年02月01日
    浏览(55)
  • Spring Boot + Spring Batch 实现批处理任务,保姆级教程!(场景实战)

    来源:blog.csdn.net/qq_35387940/article/details/108193473 概念词就不多说了,我简单地介绍下 , spring batch 是一个 方便使用的 较健全的 批处理 框架。 为什么说是方便使用的,因为这是 基于spring的一个框架,接入简单、易理解、流程分明。 为什么说是较健全的, 因为它提供了往常我

    2024年02月11日
    浏览(42)
  • List 分批处理

    2024年02月12日
    浏览(36)
  • (下篇)java通过http请求请求三方接口:设置请求头,请求体

    介绍:springcloud项目server子模块内部集成了低代码平台来配置通用列表查询,需要对低代码配置权限,低代码使用不了server模块的feign调用,只能用http请求去调用分布式项目的用户模块来获取权限,通过restTemplate调用接口,postman携带token信息可以直接调通用户中心,但是通过

    2024年02月04日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包