await、return 和 return await 的陷阱

9

dev-reading/fe 是一个阅读、导读、速读的 repo,不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具,并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容,找到感兴趣的文章,然后去阅读全文。

本文讨论地址:https://github.com/dev-readin...

阅读时间大概 2 分钟


awaitreturnreturn 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

如果你想参与讨论,请点击这里


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

jweboy · 2017年12月12日

直接调用得到undefined是因为 try 作用域没有 return value吗?

回复

1

直接调用并不是得到 undefined,而是得到一个 Promise,这个 Promise 的 resolved 值是 undefined,因为 Promise 构造函数的第一个参数 r 没有传参

justjavac 作者 · 2017年12月12日
0

@jweboy 是因为try并没有等待async函数执行完。

thomas · 2018年08月26日
鱼肚 · 2017年12月15日

学习了

回复

李梦克 · 2018年01月10日

学习了

回复

载入中...