當我使用此函式創建 3 個不同的承諾時:
const setTimer = (num) => {
return new Promise((res, rej) => {
setTimeout(() => {
res(num)
}, 2000);
})
}
然后在 async/await 函式中運行它們:
const func = async () => {
const first = await setTimer(1)
console.log(first);
const second = await setTimer(2)
console.log(second);
const third = await setTimer(3)
console.log(third);
}
func()
它們按預期同步運行(一個接一個)。
然后我直接使用 new promise 創建 3 個不同的 promise:
const setTimer1 = new Promise((res, rej) => {
setTimeout(() => {
res(1)
}, 2000);
})
const setTimer2 = new Promise((res, rej) => {
setTimeout(() => {
res(2)
}, 2000);
})
const setTimer3 = new Promise((res, rej) => {
setTimeout(() => {
res(3)
}, 2000);
})
然后在 async/await 函式中再次運行這 3 個 promise:
const func1 = async () => {
const first = await setTimer1
console.log(first);
const second = await setTimer2
console.log(second);
const third = await setTimer3
console.log(third);
}
func1()
它們現在異步(并行)運行。請幫忙解釋原因。我已經搜索了很長時間,但沒有找到答案。
uj5u.com熱心網友回復:
通過比較以下示例,最容易理解差異:
(async () => {
const p1 = new Promise(resolve => setTimeout(resolve, 2000));
const p2 = new Promise(resolve => setTimeout(resolve, 2000));
const p3 = new Promise(resolve => setTimeout(resolve, 2000));
await p1;
console.log(1); // 2 seconds later
await p2;
console.log(2); // 0 seconds later
await p3;
console.log(3); // 0 seconds later
})();
所有的 Promise 都是一個接一個地立即創建的,所以在第一個準備好的時候,所有的都準備好了。這就是為什么你會同時在你的控制臺中得到1
, 。2
3
但現在考慮這個例子:
(async () => {
await new Promise(resolve => setTimeout(resolve, 2000));
console.log(1); // 2 seconds later
await new Promise(resolve => setTimeout(resolve, 2000));
console.log(2); // 2 seconds later
await new Promise(resolve => setTimeout(resolve, 2000));
console.log(3); // 2 seconds later
})();
這一次,第二個 Promise 在第一個解決后被實體化,所以在 2 秒后。第三個等待第二個也是如此。這就是為什么你會1
在 2 秒后、2 秒2
后和 2 秒3
后得到。
要理解為什么,知道 Promise 試圖盡可能快就足夠了。它一創建就開始作業。這是一件好事!
uj5u.com熱心網友回復:
您的后三個宣告不是函式。他們為每個人分配了一個承諾,該承諾在每個人創建時運行。所以,它們應該像你的第一個一樣編碼,只有在呼叫函式時才創建承諾:
const setTimer1 = () => new Promise((res, rej) => {
setTimeout(() => {
res(1)
}, 2000);
})
const setTimer2 = () => new Promise((res, rej) => {
setTimeout(() => {
res(2)
}, 2000);
})
const setTimer3 = () => new Promise((res, rej) => {
setTimeout(() => {
res(3)
}, 2000);
})
然后你需要呼叫每個函式:
const func1 = async () => {
const first = await setTimer1();
console.log(first);
const second = await setTimer2();
console.log(second);
const third = await setTimer3();
console.log(third);
}
func1()
所需的更改非常微妙,只添加了幾個字符。與您的代碼進行比較以查看差異。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/318778.html
標籤:javascript 异步 异步等待 承诺 es6-promise
上一篇:Dart可選引數為空型別