await、return 和 return await 的陷阱

dev-reading/fe 是一個閱讀、導讀、速讀的 repo，不要依賴於 dev-reading/fe 學習知識。本 repo 只是一個快速瞭解文章內容的工具，並不提供全文解讀和翻譯。你能夠經過本平臺快速瞭解文章裏面的內容，找到感興趣的文章，而後去閱讀全文。

本文討論地址：https://github.com/dev-readin...

閱讀時間大概 2 分鐘

---

await、return 和 return await 有不少容易被忽視的不一樣之處。

首先定義一個異步函數：

async function waitAndMaybeReject() {
  // 等待1秒
  await new Promise(r => setTimeout(r, 1000));

  const isHeads = Boolean(Math.round(Math.random()));

  if (isHeads) {
    return 'yay';
  } else {
    throw Error('Boo!');
  }
}

函數等待 1 秒鐘，而後有一半的機率返回 "yay"，一半的機率拋出異常。

1 直接調用 Just calling

async function foo() {
  try {
    waitAndMaybeReject();
  }
  catch (e) {
    return 'caught';
  }
}

直接調用 foo，函數老是返回 Promise fulfill with undefined, without waiting。

永遠不會返回 "yay"。

2 Awaiting

async function foo() {
  try {
    await waitAndMaybeReject();
  }
  catch (e) {
    return 'caught';
  }
}

調用 foo，函數返回的 Promise 等待 1 秒，而後 fulfill with undefined, or fulfill with "caught"。

由於咱們 await waitAndMaybeReject() 的結果，若是 rejected，咱們的 catch 塊捕獲了異常，而後 "caught"，若是 fulfilled，咱們的函數並無返回 Promise 的值。

3 Returning

async function foo() {
  try {
    return waitAndMaybeReject();
  }
  catch (e) {
    return 'caught';
  }
}

調用 foo，函數返回的 Promise 等待 1 秒，而後 fulfill with "yay", or reject with Error('Boo!')。

4 Return-awaiting

async function foo() {
  try {
    return await waitAndMaybeReject();
  }
  catch (e) {
    return 'caught';
  }
}

調用 foo，函數返回的 Promise 等待 1 秒，而後 fulfill with "yay", or fulfill with "caught"。

這個是最符合咱們預期的寫法。

咱們能夠把它拆分一下：

async function foo() {
  try {
    // 等待 waitAndMaybeReject() 函數的結果
    // 把 fulfilled value 賦值給 fulfilledValue:
    const fulfilledValue = await waitAndMaybeReject();
    // 若是 waitAndMaybeReject() 失敗，拋出異常:
    return fulfilledValue;
  }
  catch (e) {
    return 'caught';
  }
}

---

閱讀原文：await vs return vs return await

討論地址：await、return 和 return await 的陷阱 #12

若是你想參與討論，請點擊這裏