在loop中使用Promise

Willy
3 min readAug 19, 2020

--

由於JavaScript為單線程,程式會一直往下執行,所以假如遇到了非同步的程式,它並不會等到執行完才繼續執行,它會直接往下執行;這時候如果希望等非同步的地方執行完,再繼續執行就要使用Promise。

MDN 當promise1執行完才繼續執行,並印出value

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise

當你遇到for loop後,若沒有使用promise,你會發現印出start後直接又印出end,那是因為遇到了非同步的程式,它並不會等待它執行完。

使用promise前
結果

若需要等它全部完成再執行其他行為,就使用promise;首先因為有多個非同步程式要等待它回來,所以需要使用Promise.all,(等到全部接收到resolve()才繼續往下執行),再來因為是再for loop中,所以必須先宣告一個陣列,存放每次程式執行完的結果,(每一次執行完使用push將結果放入陣列),非同步程式的部分要return promise resolve(),最後再用promise.all接剛剛暫存非同步執行結果的陣列,就可以確保執行順序正確。

MDN 使用 promise all
使用promise
結果

--

--

Willy
Willy

Written by Willy

前端修練筆記本,記錄一些踩雷及學習過程,希望能順便幫助一些,在學習或開發路上卡關的人們。

No responses yet