JS中使用Promise.all控制所有的异步请求都完成后,在执行后续逻辑

这篇具有很好参考价值的文章主要介绍了JS中使用Promise.all控制所有的异步请求都完成后,在执行后续逻辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用场景为,在js中连续的几个异步耗时操作,后面的耗时操作需要使用第一个操作的返回结果。例如调用ajax异步接口,需要先创建完主表,然后拿到主表id在去循环创建明细表,等全部创建完成后,弹出提示来,或者失败提示。
通常情况,在耗时操作完成后在去调用,需要将异步方法转成同步方法,结合回调函数,像ajax请求可以直接设置为同步,然后再调用完成的回调函数里继续去调用另一个逻辑代码,但这样就会导致代码嵌套比较多,不易拓展和维护,使用Promise.all可以减少代码里的不断嵌套,直接上代码,具体的一看代码就明白了,promise的使用有单独的笔记整理。
  1 QueryOrderInfo(orderId).then((orderResult) => {
  2             if (!orderResult.success) {
  3                 Xrm.Utility.alertDialog(`查询所选订单的信息及明细信息失败!【${orderResult.message}】`);
  4                 return
  5             }
  6             let shippingId = commonUtil.delBrackets(Xrm.Page.data.entity.getId())
  7             let promiseArray = []
  8             orderResult.details.forEach((p, idx) => {
  9                 promiseArray.push(CreateShippingOrderDetailPromise(p, orderResult.order, shippingId))
 10             })
 11             Promise.all(promiseArray).then((res) => {
 12                 console.log(res);
 13                 let failReqs = Object.entries(res).filter((a) => !(a[1].success))
 14                 if (failReqs.length) {
 15                     Xrm.Utility.alertDialog(failReqs.map(e => e[1].message).join('\n'))
 16                 }
 17                 window.top.location.reload()
 18             })
 19         }).catch((err) => { console.error(err) })
 20         
 21         
 22 /**
 23  * 根据整车订单id查询整车销售订单明细
 24  * @param {any} orderId  整车订单数据id
 25  */
 26 function QueryOrderInfo(orderId) {
 27     return new Promise((resolve, reject) => {
 28         let queryPromises = [GetOrderInfo(orderId), GetOrderDetails(orderId)]
 29         Promise.all(queryPromises).then((res) => {
 30             let orderRes = res[0]
 31             let detailRes = res[1]
 32             resolve({
 33                 success: res.every(r => r.success),
 34                 message: (orderRes.success ? "" : `[${orderRes.message}]`) + (detailRes.success ? "" : `[${detailRes.message}]`),
 35                 order: orderRes.data,
 36                 details: detailRes.data
 37             })
 38         })
 39     })
 40 }
 41 /**
 42  * 通过销售订单ID查询销售订单的付款方式(new_paymentmethod)以及对应销售合同的合同号(new_sales_contract_number)
 43  * @param {any} orderId
 44  * @returns
 45  */
 46 function GetOrderInfo(orderId) {
 47     return new Promise((resolve, reject) => {
 48         let queryUrl = `/new_orders(${orderId})?$select=new_paymentmethod&$expand=new_sales_contractid($select=new_sales_contract_number)`
 49         let result = { success: false, message: '未能正确查找', data: null }
 50         commonUtil.queryWithUrl(queryUrl, function (res) {
 51             if (!res) {
 52                 result.message = '查询销售订单信息异常,添加订舱信息反馈单明细失败!'
 53             } else if (!res.success) {
 54                 result.message = res.message
 55             } else if (res.data) {
 56                 result.success = true
 57                 result.data = {
 58                     new_paymentmethod: res.data["new_paymentmethod@OData.Community.Display.V1.FormattedValue"],
 59                     new_contractno: res.data.new_sales_contractid && res.data.new_sales_contractid.new_sales_contract_number
 60                 }
 61             }
 62             resolve(result)
 63         }, false);
 64     })
 65 }
 66 
 67 /**
 68  * 根据销售订单ID查询相关的销售订单明细记录
 69  * @param {any} orderId
 70  * @returns
 71  */
 72 function GetOrderDetails(orderId) {
 73     return new Promise((resolve, reject) => {
 74         let selFields = 'new_count,new_name,new_order_detailid,new_expected_output_time,_new_product_fourthid_value,_new_way_of_packagingid_value'
 75         let queryUrl = `/new_order_details?$select=${selFields}&$expand=new_way_of_packagingid($select=new_high,new_long,new_wide)&$filter=_new_order_value eq ${orderId}`
 76         let result = { success: false, message: '未能正确查找', data: null }
 77         commonUtil.queryWithUrl(queryUrl, function (obj) {
 78             if (!obj) {
 79                 result.message = '查询销售订单明细异常,添加订舱信息反馈单明细失败!'
 80             } else if (!obj.success) {
 81                 result.message = obj.message
 82             } else if (obj.data && obj.data.length) {
 83                 result.success = true
 84                 result.data = obj.data
 85             }
 86             resolve(result)
 87         }, false);
 88     })
 89 }
 90 
 91 
 92 /**
 93  * 根据销售订单明细创建反馈单明细记录
 94  * @param {any} orderDetail  销售明细数据
 95  */
 96 function CreateShippingOrderDetailPromise(orderDetail, order,shippingId) {
 97     return new Promise((resolve, reject) => {
 98         //包装方式
 99         var wayOfPackaging = orderDetail.new_way_of_packagingid
100         let shippingOrderDetail = {
101             "new_shipping_orderid_new_shipping_order@odata.bind": `/new_shipping_orders(${shippingId})`,       // 订舱信息反馈单ID
102             "new_order_detailid@odata.bind": `/new_order_details(${orderDetail.new_order_detailid})`,          // 整车销售订单明细
103             "new_productcode@odata.bind": `/new_product_fourths(${orderDetail._new_product_fourthid_value})`,  // 产品代码
104             new_numberofsets: orderDetail.new_count,                                                           // 台数
105             new_timespan: new Date(orderDetail.new_expected_output_time).toISOString(),                        // 预计入库时间
106             new_paymentmethod: order.new_paymentmethod,                                                        // 付款方式
107             new_contractno: order.new_contractno,                                                              // 合同号
108         }
109         if (wayOfPackaging) {
110             //包装方式
111             shippingOrderDetail["new_way_of_packagingid@odata.bind"] = `/new_way_of_packagings(${orderDetail._new_way_of_packagingid_value})`
112             //单台长
113             shippingOrderDetail.new_singlelong = wayOfPackaging.new_long
114             //单台宽
115             shippingOrderDetail.new_singlelwide = wayOfPackaging.new_wide
116             //单台高
117             shippingOrderDetail.new_singlehigh = wayOfPackaging.new_high
118         }
119         Xrm.WebApi.createRecord("new_shipping_order_detail", shippingOrderDetail).then(
120             function success(result) {
121                 resolve({ success: true })
122             },
123             function (error) {
124                 resolve({ success: false, message: error.message })
125             }
126         );
127     })
128 }

思路就是,将所有的异步耗时操作都封装成Promise对象返回,Promise可以将异步转成同步,在执行完成后结果返回到then中,然后使用Promise.all将promise对象数组一起执行,全部执行完成后再统一返回信息。文章来源地址https://www.toymoban.com/news/detail-541133.html

到了这里,关于JS中使用Promise.all控制所有的异步请求都完成后,在执行后续逻辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • JS中的异步编程与Promise

    在了解JavaScript的异步机制之前,我们首先需要理解JavaScript是一种单线程语言。单线程就意味着所有的任务需要按照顺序一次执行,如果前一个任务没有完成,后一个任务就无法开始。这个特性在执行大量或耗时任务时可能会导致阻塞或者界面卡死,这显然是不可取的。 为了

    2024年02月08日
    浏览(48)
  • 【js】js 异步机制详解 Generator / Async / Promise

    三种语法功能放在一起,是因为他们都有相似特点: 维护某种状态 在未来恢复状态并执行 本文重点回答以下几个问题: 为什么 Generator 和 Async 函数的 代码执行流 都可以简化成树形结构? async 函数为什么返回一个 promise?返回了怎样一个 promise? async 函数如何优雅的转换成

    2024年01月21日
    浏览(42)
  • Promise.all和Promise.race的区别和使用

    比如当数组里的P1,P2都执行完成时,页面才显示。 值得注意的是,返回的数组结果顺序不会改变,即使P2的返回要比P1的返回快,顺序依然是P1,P2 Promise.all成功返回成功数组, 失败返回失败数据,一但失败就不会继续往下走 如果遇到错误的情况,那么将不会继续执行下去,直

    2023年04月18日
    浏览(36)
  • js异步请求接口\模拟异步封装

    2024年01月16日
    浏览(32)
  • 什么是Promise对象?它的状态有哪些?如何使用Promise处理异步操作?以及 async、await

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(44)
  • 【手写promise——基本功能、链式调用、promise.all、promise.race】

    关于动机,无论是在工作还是面试中,都会遇到Promise的相关使用和原理,手写Promise也有助于学习设计模式以及代码设计。 本文主要介绍了如何使用自己的代码去实现Promise的一些功能。 以下是本篇文章正文内容 手写之前,需要知道promise有哪些基本特性: 1、promise有三种状态

    2024年02月11日
    浏览(34)
  • Promise.all和promise.race的应用场景举例

    Promise.all( ) .then( )适用于处理多个异步任务,且所有的 异步任务都得到结果 时的情况。 打印的结果 Promise.race赛跑机制,只认第一名    效果图  

    2024年02月10日
    浏览(40)
  • 限制异步HTTP请求并发:简单、有效的20个并发下载控制策略

      概述: 通过使用`SemaphoreSlim`,可以简单而有效地限制异步HTTP请求的并发量,确保在任何给定时间内不超过20个网页同时下载。`ParallelOptions`不适用于异步操作,但可考虑使用`Parallel.ForEach`,尽管在异步场景中谨慎使用。 对于并发异步 I/O 操作的数量限制,可以使用 Semaphor

    2024年04月11日
    浏览(40)
  • 【ES6】Promise.all用法

    Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以

    2024年02月09日
    浏览(33)
  • async/await实现Promise.all()

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:专注于前端领域各种技术,热衷分享,期待你的关注。 💫系列专栏:vue3从入门到精通 📝个人签名:不破不立 Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且 只返回

    2024年01月18日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包