主頁 > 軟體設計 > 如何僅在承諾完成后執行代碼

如何僅在承諾完成后執行代碼

2021-12-28 15:41:12 軟體設計

每件事都在我的代碼中作業,問題是this.loading=falsefor()發送所有請求之前運行

this.loading=false僅在for()完成發送所有請求后,如何才能執行我希望你明白了。

methods:{
    fileChange(event){
        this.loading=true
        //code
        for(var i=0; i < tasks.length; i  ){
            //code
            axios.post('/api/operation', data)
                .then(response=>{
                    this.operations.push(name:response.data.name});
                })
                
        }
        
        //i want to the bellow code to be executed after for() is finnished!
        this.loading=false
    },

},

uj5u.com熱心網友回復:

使用異步/等待

methods: {
    async fileChange(event) {
      this.loading = true
      for (let i = 0; i < tasks.length; i  ) {
        const {data} = await axios.post('/api/operation', data) // << whats data?
        
        this.operations.push({ name: data.name })
      }
      this.loading = false
    },
},

uj5u.com熱心網友回復:

您的代碼確實設定this.loadingfalse發送所有請求之后您的意思是要在所有請求的所有回應都回傳后設定它嗎?我希望我正確理解了你的問題。

在這種情況下,您可以使用Promise.all()or Promise.allSettled():它們中的每一個都接受一個Promises陣列(例如,axios請求),并回傳另一個Promise在陣列中的所有承諾完成后用結果決議的陣列。

簡單來說,它允許您將許多承諾合并為一個,只有在它們全部完成后才完成。

例如:

methods: {
  fileChange(event) {
    this.loading = true;

    // Send requests and store the Promises in an array.
    // Each promise resolves to the response's `response.data.name` field.
    const requestPromises = [];
    for (var i = 0; i < tasks.length; i  ) {
      const promise = axios.post('/api/operation', data)
        .then(response => response.data.name);
      requestPromises.push(promise);
    }

    // Executed once all requests return a response
    Promise.all(requestPromises)
      .then(names => {
        // Push all operation names into operations
        this.operations.push(...names);
        this.loadaing = false;
      });
  }
},

(注意:您可以使用Array.map()async/使代碼更加優雅await

Promise.all()之間的區別在于Promise.allSettled()錯誤的處理 -Promise.all()如果傳遞給它的任何承諾失敗,則失敗(拒絕),而Promise.allSettled()始終決議為一個物件陣列,每個物件包含有關操作是否成功及其相關值的資料。

編輯:awaitfor回圈使用會起作用,但效率非常低,因為您的代碼將等待一個請求結束,然后再發送下一個請求;如果您有 50 個請求要發送,并且每個請求大約需要 100 毫秒才能回傳,則使用awaitinsidefor將需要 50 * 100 = 5000 毫秒,或 5 秒才能結束使用Promise.all/Promise.allSettled將使該數字接近 100 毫秒,因為所有請求都是一起發送的。

轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/395496.html

標籤:Vue.js 异步 异步等待 承诺 公理

上一篇:在單擊時訪問使用v-if顯示的物件的索引

下一篇:返回列表

標籤雲
其他(133325) Python(23108) Java(14474) JavaScript(14378) C(10850) 區塊鏈(8038) AI(6731) 基礎類(6313) 腳本語言(PerlPython)(5129) MySQL(5087) 非技術區(4971) Android(4183) Linux(4000) PHP(3625) C#(3448) 爪哇(3309) C語言(3288) C++語言(3117) html(3064) sql(2799) Java相關(2746) 疑難問題(2699) R(2630) 数组(2554) 熊猫(2552) 單片機工控(2479) 反应(2230) Web開發(1951) css(1857) VBA(1855) 数据框(1820) 網絡通信(1793) 节点.js(1783) 數據庫相關(1767) VB基礎類(1755) 開發(1646) ASP.NET(1642) .NETCore(1635) 系統維護與使用區(1617) 蟒蛇-3.x(1613) 基礎和管理(1579) JavaEE(1566) C++(1563) 專題技術討論區(1515) HtmlCss(1495) Windows客戶端使用(1484) 列表(1468) json(1452) Unity3D(1365) 安卓(1361) iOS(1357) VCL組件開發及應用(1353) 扑(1318) .NET技术(1308) 查询(1286) 打字稿(1280) Qt(1269) HTML(CSS)(1220) 其他技術討論專區(1200) WindowsServer(1195)

熱門瀏覽
  • 面試突擊第一季,第二季,第三季

    第一季必考 https://www.bilibili.com/video/BV1FE411y79Y?from=search&seid=15921726601957489746 第二季分布式 https://www.bilibili.com/video/BV13f4y127ee/?spm_id_fro ......

    uj5u.com 2020-09-10 05:35:24 more
  • 第三單元作業總結

    1.前言 這應該是本學期最后一次寫作業總結了吧。總體來說,對作業的節奏也差不多掌握了,作業做起來的效率也更高了。雖然和之前的作業一樣,作業中都要用到新的知識,但是相比之前,更加懂得了如何利用工具以及資料。雖然之間卡過殼,但總體而言,這幾次作業還算完成的比較好。 2.作業程序總結 相比前兩個單元,此單 ......

    uj5u.com 2020-09-10 05:35:41 more
  • 北航OO(2020)第四單元博客作業暨課程總結博客

    北航OO(2020)第四單元博客作業暨課程總結博客 本單元作業的架構設計 在本單元中,由于UML圖具有比較清晰的樹形結構,因此我對其中需要進行查詢操作的元素進行了包裝,在樹的父節點中存盤所有孩子的參考。考慮到性能問題,我采用了快取機制,一次查詢后盡可能快取已經遍歷過的資訊,以減少遍歷次數。 本單元我 ......

    uj5u.com 2020-09-10 05:35:48 more
  • BUAA_OO_第四單元

    一、UML決議器設計 ? 先看下題目:第四單元實作一個基于JDK 8帶有效性檢查的UML(Unified Modeling Language)類圖,順序圖,狀態圖分析器 MyUmlInteraction,實際上我們要建立一個有向圖模型,UML中的物件(元素)可能與同級元素連接,也可與低級元素相連形成 ......

    uj5u.com 2020-09-10 05:35:54 more
  • 6.1邏輯運算子

    邏輯運算子 1. && 短路與 運算式1 && 運算式2 01.運算式1為true并且運算式2也為true 整體回傳為true 02.運算式1為false,將不會執行運算式2 整體回傳為false 03.只要有一個運算式為false 整體回傳為false 2. || 短路或 運算式1 || 運算式2 ......

    uj5u.com 2020-09-10 05:35:56 more
  • BUAAOO 第四單元 & 課程總結

    1. 第四單元:StarUml檔案決議 本單元采用了圖模型決議UML。 UML檔案可以抽象為圖、子圖、邊的邏輯結構。 在實作中,圖的節點包括類、介面、屬性,子圖包括狀態圖、順序圖等。 采用了三次遍歷UML元素的方法建圖,第一遍遍歷建點,第二、三次遍歷設定屬性、連邊,實作圖物件的初始化。這里借鑒了一些 ......

    uj5u.com 2020-09-10 05:36:06 more
  • 談談我對C# 多型的理解

    面向物件三要素:封裝、繼承、多型。 封裝和繼承,這兩個比較好理解,但要理解多型的話,可就稍微有點難度了。今天,我們就來講講多型的理解。 我們應該經常會看到面試題目:請談談對多型的理解。 其實呢,多型非常簡單,就一句話:呼叫同一種方法產生了不同的結果。 具體實作方式有三種。 一、多載 多載很簡單。 p ......

    uj5u.com 2020-09-10 05:36:09 more
  • Python 資料驅動工具:DDT

    背景 python 的unittest 沒有自帶資料驅動功能。 所以如果使用unittest,同時又想使用資料驅動,那么就可以使用DDT來完成。 DDT是 “Data-Driven Tests”的縮寫。 資料:http://ddt.readthedocs.io/en/latest/ 使用方法 dd. ......

    uj5u.com 2020-09-10 05:36:13 more
  • Python里面的xlrd模塊詳解

    那我就一下面積個問題對xlrd模塊進行學習一下: 1.什么是xlrd模塊? 2.為什么使用xlrd模塊? 3.怎樣使用xlrd模塊? 1.什么是xlrd模塊? ?python操作excel主要用到xlrd和xlwt這兩個庫,即xlrd是讀excel,xlwt是寫excel的庫。 今天就先來說一下xl ......

    uj5u.com 2020-09-10 05:36:28 more
  • 當我們創建HashMap時,底層到底做了什么?

    jdk1.7中的底層實作程序(底層基于陣列+鏈表) 在我們new HashMap()時,底層創建了默認長度為16的一維陣列Entry[ ] table。當我們呼叫map.put(key1,value1)方法向HashMap里添加資料的時候: 首先,呼叫key1所在類的hashCode()計算key1 ......

    uj5u.com 2020-09-10 05:36:38 more
最新发布
  • 如何僅在承諾完成后執行代碼

    每件事都在我的代碼中作業,問題是this.loading=false在for()發送所有請求之前運行。this.loading=false僅在for()完成發送所有請求后,如何才能執行?我希望你明白了。methods:{...

    uj5u.com 2021-12-28 15:41:12 more
  • 在單擊時訪問使用v-if顯示的物件的索引

    我有一個物件,我使用嵌套的 v-if 陳述句在螢屏上動態顯示該物件。該物件顯示為表格。我希望每個“單元格”都有一個單擊處理程式,該處理程式回傳該確切“單元格”的索引,以便我...

    uj5u.com 2021-12-28 15:40:08 more
  • 如何在vuejs中$emit

    vuejs 發出不起作用,我正在嘗試更改布林值的值,但它不想發出更改這是第一個組件:<template><div id="reg"> <div id="modal"> <edu></edu> </div> <div :plus=...

    uj5u.com 2021-12-28 15:39:24 more
  • Nuxtjs側邊欄路由

    我正在開發一個簡單的儀表板。試圖使側邊欄靜態而只是主要部分動態。成功地將側邊欄設為靜態,但 nuxt 鏈接的新頁面路由上的元素出現在側邊欄下,而不是主頁部分。附注。我使用...

    uj5u.com 2021-12-28 15:38:35 more
  • 在使用Nuxt/Vue或使用純JavaScript將資料提交到多個文本輸入后生

    我正在創建一個應用程式,用戶將在其中注冊一個包,然后它將進入投票環節。投票完成后,它將分配給其他人。(只是一個簡單的場景來解釋)現在我希望該選票會話/框附加有自定義的唯一...

    uj5u.com 2021-12-28 15:37:34 more
  • 串列渲染組件時,嵌套組件資料不會更新

    父組件上的串列渲染完美運行<stock-card class="col-sm" v-for="(stock, index) in formattedStocks" :stock="stock" :key="...

    uj5u.com 2021-12-28 15:36:41 more
  • 如何在vue.js中使用不同的組態檔發送不同的url?

    我有以下代碼:this.$store.dispatch(GET_RESOURCE, // 'http://10.20.48.124:1001/get/data/' -->this one for dev profile // 'http://10.20.48.124:80...

    uj5u.com 2021-12-28 15:35:36 more
  • 是否可以將子彈放入v-for中?

    桌子資料庫中的資料僅用逗號分隔。Hepatitis A IgM Antibody (Anti-HAV IgM),Hepatitis A Total Antibody (Anti-HAV Total),Hepatitis B Core Antibody (Anti HBc Total),H...

    uj5u.com 2021-12-28 15:34:07 more
  • 如何在Prisma模式中表示額外的關系列?

    我正在使用 Prisma 3.7.0 和 Postgresql 13。我需要在具有一些附加資料的兩個模型之間創建多對多關系,但我不知道如何在 Prisma 模式中執行此操作。我想添加的欄位未適當添加...

    uj5u.com 2021-12-28 14:54:42 more
  • Magento2:從資料庫中獲取產品、Sku和制造商名稱

    我使用此查詢來獲取產品名稱和 Sku。我想添加存盤在制造商屬性中的“品牌名稱”。是否可以擴展此查詢以按產品獲取制造商名稱?SELECT nametable.value, nametable.sto...

    uj5u.com 2021-12-28 14:53:50 more