await、return 和 return await 的陷阱

qujian 发布于2019-08-22 13:40 / 2415人阅读

摘要：本文讨论地址阅读时间大概分钟和有很多容易被忽视的不同之处。首先定义一个异步函数等待秒函数等待秒钟，然后有一半的概率返回，一半的概率抛出异常。这个是最符合我们预期的写法。

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
如果你想参与讨论，请点击这里

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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