正如您在問題中所暗示的，您的代碼同步地創(chuàng)建所有承諾。相反，應(yīng)該只在前一個(gè)解析時(shí)創(chuàng)建它們。
第二，每一個(gè)承諾new Promise需要通過調(diào)用resolve(或reject)。這應(yīng)該在計(jì)時(shí)器過期時(shí)進(jìn)行。會(huì)觸發(fā)任何then你就可以收回你的承諾了。而這樣的then回調(diào)(或await)是執(zhí)行鏈所必需的。
有了這些成分，有幾種方法可以執(zhí)行這個(gè)異步鏈接：
帶著for循環(huán)，以立即解決承諾開始。
帶著Array#reduce首先是一個(gè)立竿見影的承諾
具有將自身傳遞為分辨率回調(diào)的函數(shù)。
與ECMAScript2017async / await句法
與提議的ECMAScript 2020for await...of句法
請(qǐng)參閱下面每個(gè)選項(xiàng)的代碼段和注釋。
1.與for
你，你們能，會(huì)，可以用for循環(huán)，但您必須確保它不執(zhí)行new Promise同步。相反，您創(chuàng)建一個(gè)初始的立即解決承諾，然后鏈接新的承諾，就像前面的承諾一樣：
for (let i = 0, p = Promise.resolve(); i < 10; i++) {
p = p.then(_ => new Promise(resolve =>
setTimeout(function () {
console.log(i);
resolve();
}, Math.random() * 1000)
));}2.與reduce
這只是對(duì)以前策略的一種更有功能的方法。創(chuàng)建一個(gè)與要執(zhí)行的鏈長(zhǎng)度相同的數(shù)組，并從立即解析承諾開始
[...Array(10)].reduce( (p, _, i) =>
p.then(_ => new Promise(resolve =>
setTimeout(function () {
console.log(i);
resolve();
}, Math.random() * 1000)
)), Promise.resolve() );這可能更有用有在承諾中使用數(shù)據(jù)的數(shù)組。
3.函數(shù)本身作為分辨率回調(diào)。
這里我們創(chuàng)建一個(gè)函數(shù)并立即調(diào)用它。它同步地創(chuàng)建了第一個(gè)承諾。當(dāng)它解析時(shí)，將再次調(diào)用該函數(shù)：
(function loop(i) {
if (i < 10) new Promise((resolve, reject) => {
setTimeout( () => {
console.log(i);
resolve();
}, Math.random() * 1000);
}).then(loop.bind(null, i+1));})(0);這將創(chuàng)建一個(gè)名為loop，在代碼的末尾，您可以看到它被立即用參數(shù)0調(diào)用。這是柜臺(tái)，i爭(zhēng)論。該函數(shù)將創(chuàng)建一個(gè)新的承諾，如果計(jì)數(shù)器仍然低于10，否則鏈接停止。
打電話給resolve()將觸發(fā)then回調(diào)，這將再次調(diào)用該函數(shù)。loop.bind(null, i+1)只是另一種說法_ => loop(i+1).
4.與async/await
現(xiàn)代JS發(fā)動(dòng)機(jī)支持此語法:
(async function loop() {
for (let i = 0; i < 10; i++) {
await new Promise(resolve => setTimeout(resolve, Math.random() * 1000));
console.log(i);
}})();它看起來可能很奇怪，因?yàn)樗?/trans>似乎就像new Promise()調(diào)用是同步執(zhí)行的，但實(shí)際上async功能回報(bào)當(dāng)它執(zhí)行第一個(gè)await..每次等待的承諾解決后，函數(shù)的運(yùn)行上下文都會(huì)被恢復(fù)，并在await，直到遇到下一個(gè)，直到循環(huán)結(jié)束。
由于基于超時(shí)返回承諾可能是一件常見的事情，您可以創(chuàng)建一個(gè)單獨(dú)的函數(shù)來生成這樣的承諾。這叫做親化函數(shù)，在這種情況下setTimeout..它可以提高代碼的可讀性：
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));(async function loop() {
for (let i = 0; i < 10; i++) {
await delay(Math.random() * 1000);
console.log(i);
}})();5.與for await...of
甚至最近for await...of語法出現(xiàn)在一些JavaScript引擎上。雖然在這種情況下它并沒有真正減少代碼，但它允許將隨機(jī)區(qū)間鏈的定義與實(shí)際的迭代隔離開來：
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));async function * randomDelays(count ,max) {
for (let i = 0; i < count; i++) yield delay(Math.random() * max).then(() => i);}(async function loop() {
for await (let i of randomDelays(10, 1000)) console.log(i);})();
