前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >'return await promise' 与 'return promise' 这细微的区别

'return await promise' 与 'return promise' 这细微的区别

作者头像
前端小智@大迁世界
发布2022-05-31 10:13:42
7910
发布2022-05-31 10:13:42
举报
文章被收录于专栏:终身学习者

当从一个异步函数的promise返回时,我们可以使用return await promise等待 promise 解析完,也可以直接返回它 return promise

代码语言:javascript
复制
async function func1() {
  const promise = asyncOperation();
  return await promise;
}

// vs

async function func2() {
  const promise = asyncOperation();
  return promise;
}

这两个表达式都是有效的。然而,在某些情况下,这些表达式的表现会有所不同吗?我们往下看。

1. 相同的行为

为了找到这两个表达式(返回 await promise vs return promise)之间的区别,我们需要一个辅助函数 delayedDivide(n1, n2)

该函数除2个数字,并返回包含在promise中的除法结果:

代码语言:javascript
复制
function promisedDivision(n1, n2) {
  if (n2 === 0) {
    return Promise.reject(new Error('Cannot divide by 0'));
  } else {
    return Promise.resolve(n1 / n2);
  }
}

如果第二个参数(除数)是 0,该函数返回一个 reject,因为除以 0 是不可能的。

定义了辅助函数之后,我们来跑几个例子。

下面的函数divideWithAwait()使用return await promisedDivision(6,2)表达式来返回包裹在promise中的 6 除以 2 的除法

代码语言:javascript
复制
async function divideWithAwait() {
  return await promisedDivision(6, 2);
}

async function run() {
  const result = await divideWithAwait();
  console.log(result); // logs 3
}
run();

事例地址:https://codesandbox.io/s/with...

run()函数中,await divideWithAwait()表达式的计算结果为除法结果 3,一切正常。

如果有返回不带await关键字,结果又会怎么样呢?

代码语言:javascript
复制
async function divideWithoutAwait() {
  return promisedDivision(6, 2);
}

async function run() {
  const result = await divideWithoutAwait();
  console.log(result); // logs 3
}
run();

事例地址:https://codesandbox.io/s/with...

即使在divideWithoutAwait() 中没有使用 await 关键字,run() 函数中的表达式awaitdivideWithoutAwait() 的结果也是正确的。

在这一步,我们已经看到使用return await promisereturn promise并没有什么不同。

2.不同行为

现在我们采用另一种方法,要使函数 promisedDivision(n1, n2)返回一个被拒绝的promise,我们将第二个参数设置为 0

因为promisedDivision(n1, 0) 会返回一个异常,我们使用 try {... } catch (error) {...}

代码语言:javascript
复制
async function divideWithAwait() {
  try {
    return await promisedDivision(5, 0);
  } catch (error) {
    // Rejection caught
    console.log(error); // logs Error('Cannot divide by 0')
  }
}

async function run() {
  const result = await divideWithAwait();
}
run();

事例地址:https://codesandbox.io/s/with...

如果没有 await,结果又会怎么样?

代码语言:javascript
复制
async function divideWithoutAwait() {
  try {
    return promisedDivision(5, 0);
  } catch (error) {
    // Rejection NOT caught
    console.log(error);
  }
}

async function run() {
  const result = await divideWithoutAwait();
}
run(); // Uncaught Error: Cannot divide by 0

事例地址:https://codesandbox.io/s/with...

然而,这次,catch(error) { ... }并没有捕捉到异常。

到这,我们就使用return await promisereturn promise之间的主要区别了。

~完,我是刷碗智,我要去 SPA 了,我们下期见!

作者:Dmitri Pavlutin 译者:前端小智 来源:Dmitri Pavlutin

原文:https://dmitriplutin.com/retu...

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 相同的行为
  • 2.不同行为
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档