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

  • JS中使用Promise.all控制所有的异步请求都完成后,在执行后续逻辑已关闭评论
  • 112 次浏览
  • A+
所属分类:Web前端
摘要

思路就是,将所有的异步耗时操作都封装成Promise对象返回,Promise可以将异步转成同步,在执行完成后结果返回到then中,然后使用Promise.all将promise对象数组一起执行,全部执行完成后再统一返回信息。

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