在函式中回傳新承諾與直接在async/await中使用新承諾？

當我使用此函式創建 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, 。23

但現在考慮這個例子：

(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()

所需的更改非常微妙，只添加了幾個字符。與您的代碼進行比較以查看差異。

標籤：javascript 异步 异步等待 承诺 es6-promise

上一篇：Dart可選引數為空型別

下一篇：如何在Flutter中重新加載FutureBuilder？