JS中使用Promise.all控制所有的非同步請求都完成後,在執行後續邏輯

来源:https://www.cnblogs.com/adingfirstlove/archive/2023/07/10/17541177.html
-Advertisement-
Play Games

將所有的非同步耗時操作都封裝成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["[email protected]"],
 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             "[email protected]": `/new_shipping_orders(${shippingId})`,       // 訂艙信息反饋單ID
102             "[email protected]": `/new_order_details(${orderDetail.new_order_detailid})`,          // 整車銷售訂單明細
103             "[email protected]": `/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["[email protected]"] = `/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對象數組一起執行,全部執行完成後再統一返回信息。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ![](https://img2023.cnblogs.com/blog/3076680/202307/3076680-20230710222226297-1155867049.png) # 1. 年月日加減法 ## 1.1. DB2 ### 1.1.1. sql ```sql select hir ...
  • > 你準備好面試了嗎?這裡有一些面試中可能會問到的問題以及相對應的答案。如果你需要更多的面試經驗和麵試題,關註一下"**張飛的豬大數據分享**"吧,公眾號會不定時的分享相關的知識和資料。 [TOC] ## 1、為什麼會產生 yarn,它解決了什麼問題,有什麼優勢? 1)Yarn最主要的功能就是解決運 ...
  • 本文主要從TiDB的各類組件為起點,瞭解它的基礎架構,並重點分析它在存儲架構方面的設計,探究其如何組織數據,Table中的每行記錄是如何在記憶體和磁碟中進行存儲的。 ...
  • 之前的文章中,我們已經為大家介紹了 [ChengYing](https://github.com/DTStack/chengying) 的安裝原理、產品包製作、產品線部署等內容,本篇將和大家介紹一個困擾許多開發者的內容——ChengYing 主機接入。幫助所有對 ChengYing 感興趣的開發者更 ...
  • InnoDB存儲引擎最早由Innobase Oy公司開發(屬第三方存儲引擎)。從MySQL 5.5版本開始作為表的預設存儲引擎。該存儲引擎是第一個完整支持ACID事務的MySQL存儲引擎,特點是行鎖設計、支持MVCC、支持外鍵、提供一致性非鎖定讀,非常適合OLTP場景的應用使用。目前也是應用最廣泛的... ...
  • 一、麒麟V10關閉防火牆 kylinV10系統或linux系統關閉啟動防火牆開啟防火牆並設置開機自啟啟動: systemctl start firewalld關閉: systemctl stop firewalld查看狀態: systemctl status firewalld開機禁用 : syst ...
  • 原文地址:[Android 自定義view中根據狀態修改drawable圖片 - Stars-One的雜貨小窩](https://stars-one.site/2023/07/09/android-view-state-drawable) 本文涉及知識點: - Android里的selector圖片 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 我們打開百度這個網站並刷新多次時時,註意到百度的logo是沒有每次都載入一遍的。我們知道圖片是img標簽中的src屬性載入出來的,這也需要瀏覽器去請求圖片資源的,那麼為什麼刷新多次瀏覽器只請求了一次圖片資源呢?這就涉及到了瀏覽器的緩 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...