使用场景为,在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对象数组一起执行,全部执行完成后再统一返回信息。

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

  1. 使用Promise发送多个异步请求, 全部完成后再执行

    const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...

  2. js中的promise详解

    一 概述   Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件.ES6统一了用法,并原生提供了Promise对象.作为对象,Promise有一下两个特点: (1)对象的 ...

  3. Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...

  4. 在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...

  5. 在 Node.js 中引入模块:你所需要知道的一切都在这里

    本文作者:Jacob Beltran 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58eaf471a58c240ae35bb ...

  6. Promise.all处理多个异步请求

    一个前台页面需要请求2个rest接口获取数据,一个用于解析文件获取列名,一个查询数据库获得列值. 有很低的概率页面显示为空,刷新可能就有显示了. 使用Promise.all就解决了上面的问题,2部分数 ...

  7. JS中的Promise

    Promise 对象有以下两个特点. (1)对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和 ...

  8. Promise来控制JavaScript的异步执行

    一般来说,js.html都是按照从上至下这种方式来进行执行的.这就造成了,基本上所有的执行过程都是在一个线程中进行. 我们都知道,ajax的使用大大的提高了前后台的沟通效率,那么有没有什么方式,让js ...

  9. js中实现页面跳转(返回前一页、后一页)

    一:JS 重载页面,本地刷新,返回上一页 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a ...

  10. js中宏任务,微任务,异步,同步,执行的顺序

     [微任务]包括:Promise ,    process.nextTick() *node.js里面的  [宏任务]包括:整体代码script,  setTimeout    setInterval ...

随机推荐

  1. 基于SqlSugar的开发框架循序渐进介绍(26)-- 实现本地上传、FTP上传、阿里云OSS上传三者合一处理

    在前面介绍的随笔<基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式[Options]处理常规上传和FTP文件上传>中介绍过在文件上传处理的过程中,整合了本 ...

  2. ros-python学习样例笔记

    1.通信基本原理介绍 待写 2.三种通信方式的程序样例(python版) 2.1 topic 通信方式(非自定义和自定义) 2.1.1 创建工作空间和topic功能包 在ubuntu中打开命令行,输入 ...

  3. MySQL(十四)分析查询语句Explain 七千字总结

    分析查询语句:EXPLAIN 1概述 ​ 定位了查询慢的SQL之后,就可以使用EXPLAIN或者DESCRIBE工具做针对性的分析查询.两者使用方法相同,并且分析结果也是相同的. ​ MySQL中有专 ...

  4. 卸载wamp忘记备份MySql,如何恢复MySql数据

    大家把wamp卸载了,但是数据库忘记备份了.怎么办?不要急,不要慌!打开wamp所在目录(前提是你没有删),你会发现wamp特别良心的帮你把MySql的data文件夹留下来了,这个时候你只要把这个文件 ...

  5. UnrealEngine - 网络同步之连接篇

    1 连接过程 - 握手 传统的 C/S 架构下,Client 和 Server 通常会建立一条抽象的 Connection,用来进行两端的通信. UE 的官方文档中提供了 Client 连接到 Ser ...

  6. Kubuesphere部署Ruoyi(三):持久化存储配置

    按照如下教程配置NFS 先服务器: https://kubesphere.io/zh/docs/v3.3/reference/storage-system-installation/nfs-serve ...

  7. 【Python毕业设计】基于Python+Flask+MySQL的学生信息管理系统(附完整源码)

    1.项目说明基于python+Flask+mysql的学生信息管理系统项目实战 项目需要安装pycharm专业版,mysql数据库以及项目所需的所有模块创建数据库名称db_online_notes,然 ...

  8. LINUX经常使用的命令详解

    LINUX经常使用的命令详解 源地址:http://blog.itpub.net/29065182/viewspace-1189162/ 1.man 对你熟悉或不熟悉的命令提供帮助解释  eg:man ...

  9. XUnit数据共享与并行测试

    引言 在单元或者集成测试的过程中,需要测试的用例非常多,如果测试是一条一条过,那么需要花费不少的时间.从 V2 开始,默认情况下 XUnit 自动配置并行(参考资料),大大提升了测试速度.本文将对 A ...

  10. Linux修改系统时间(手动/自动同步)

    一.手动修改 1.在终端窗口中输入date来查看系统当前的时间. 2.使用命令:"date -s 完整日期时间(YYYY-MM-DD hh:mm:ss)" 3.最后使用命令:&qu ...