await、return 和 return await 的陷阱

qujian 發布于2019-08-22 13:40 / 2450人閱讀

摘要：本文討論地址閱讀時間大概分鐘和有很多容易被忽視的不同之處。首先定義一個異步函數等待秒函數等待秒鐘，然后有一半的概率返回，一半的概率拋出異常。這個是最符合我們預期的寫法。

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
如果你想參與討論，請點擊這里

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92380.html

js 異步編程

摘要：總結這篇文章簡單的介紹了一些常用的異步編程的方法，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏。大家都知道js的執行環境是單線程的，如果沒有異步編程，那么js的執行效率會非常低下，導致程序十分卡頓，一提到異步編程大家首先的想到的一定是回調函數，這也是最常用的異步編程的形式，但其實常用的還有Promise和Async函數，接下來就讓我們一起學習這幾種常用的異步編程方法...

diabloneo 2019-08-23 12:37 評論0 收藏0
現代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

摘要：控制臺將顯示回調地獄通常，回調只能由一個異步函數調用。更多資源使更友好規范使用異步函數簡化異步編碼旅程異步編程是一項在中無法避免的挑戰。 JavaScript經常聲稱是_異步_。那是什么意思？它如何影響發展？近年來這種方法有何變化？請思考以下代碼： result1 = doSomething1(); result2 = doSomething2(result1); 大多數語言都處理每...

shadowbook 2019-08-29 16:29 評論0 收藏0
現代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

摘要：控制臺將顯示回調地獄通常，回調只能由一個異步函數調用。更多資源使更友好規范使用異步函數簡化異步編碼旅程異步編程是一項在中無法避免的挑戰。 JavaScript經常聲稱是_異步_。那是什么意思？它如何影響發展？近年來這種方法有何變化？請思考以下代碼： result1 = doSomething1(); result2 = doSomething2(result1); 大多數語言都處理每...

oujie 2019-08-23 11:28 評論0 收藏0
現代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

摘要：控制臺將顯示回調地獄通常，回調只能由一個異步函數調用。更多資源使更友好規范使用異步函數簡化異步編碼旅程異步編程是一項在中無法避免的挑戰。 JavaScript經常聲稱是_異步_。那是什么意思？它如何影響發展？近年來這種方法有何變化？請思考以下代碼： result1 = doSomething1(); result2 = doSomething2(result1); 大多數語言都處理每...

anquan 2019-08-02 11:19 評論0 收藏0