【翻译】JavaScript中'return|【翻译】JavaScript中'return await promise' 和 'return promise' 【翻译】JavaScript中'returnawait

文章图片

原文：'return await promise' vs 'return promise' in JavaScript
JavaScript中'return await promise' 和 'return promise' 当从异步函数的 promise 返回结果时，你可以等待该 promise 执行完再 return await promise，也可以直接返回 return promise：

async function func1() { const promise = asyncOperation(); return await promise; }// vs async function func2() { const promise = asyncOperation(); return promise; }

你很快就会看到这两个表达式都可以有效执行。
但是，是否存在这些表达式表现不同的情况？让我们来了解一下！
1、Same behavior（相同的行为）为了找出这两个表达式之间的区别（return await promise 和 return promise），将使用一个辅助函数promisedDivision(n1, n2)。该函数对 2 个参数进行除法计算，并返回包装在一个Promise中的结果：

function promisedDivision(n1, n2) { if (n2 === 0) { return Promise.reject(new Error('Cannot divide by 0')); } else { return Promise.resolve(n1 / n2); } }

如果第二个（除数）参数为 0，该函数将返回一个Promise的reject，因为除以 0 是不可能的。
好的，定义了辅助函数，让我们对一些数字进行除法计算。
以下函数divideWithAwait() 使用return await promiseDivision(6, 2) 表达式返回包装在promise 中的6 除以2的结果：

async function divideWithAwait() { return await promisedDivision(6, 2); }async function run() { const result = await divideWithAwait(); console.log(result); // logs 3 } run();

在 run() 函数内部，等待divideWithAwait() 执行完返回结果，而divideWithAwait() 内部中等待promisedDivision(6, 2)执行完返结回结果。一切正常。
现在让我们尝试使用没有 await 关键字的第二个表达式，并直接返回包装了除法结果的 promise 返回 promiseDivision(6, 2)：

async function divideWithoutAwait() { return promisedDivision(6, 2); }async function run() { const result = await divideWithoutAwait(); console.log(result); // logs 3 } run();

即使在divideWithoutAwait() 中不使用await 关键字，run() 函数中的表达式divideWithoutAwait() 仍然正确地将6 / 2 除法计算为3！
在这一步，您已经看到使用 return await promise 和 return promise 没有区别。至少在处理成功的Promise时。
但让我们进一步探索！
2、Different behavior（不同的行为）现在让我们采取另一种方法，特别是尝试处理执行Promise.reject时。为了让函数 promiseDivision(n1, n2) 返回一个reject的 promise，我们将第二个参数设置为 0。
因为 promiseDivision(n1, 0) 现在将返回reject，让我们将执行过程放在try {... } catch (error) {...} 中进行——以查看是否捕获了reject的 promise。
好的，让我们使用带有 await 关键字的 return await promiseDivision(5, 0) 表达式：

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(); console.log(result); // logs undifined } run();

因为除以零是不可能的，所以 promiseDivision(5, 0) 返回一个reject的 promise。 catch(error) { ... } 成功捕获了由 promiseDivision(5, 0) 抛出的reject的 promise。
省略 await 的第二种方法呢？

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

然而，这一次 catch(error) { ... } 没有捕获reject的 promise。
现在您可以很容易地看到使用 return await promise 和 return promise 之间的主要区别：

When being wrapped into try { ... }, the nearby catch(error) { ... } catches the rejected promise only if the promise is awaited (which is true for return await promise).
当被放入try {... } catch (error) {...}时，仅仅如果promise被await修饰时（return await promise）,最近的catch(error) { ... }将会捕获promise的reject结果！

3、Conclusion（总结）在大多情况下，特别是Promise返回成功的结果（resolve）时，return await promise and return promise并没有多大的区别。
然而、如果你想要从一个异步函数的1返回结果中捕捉promise的reject结果，你应该明确的使用return await promise表达式并且有意的用await修饰！
【【翻译】JavaScript中'return|【翻译】JavaScript中'return await promise' 和 'return promise'】try {...catch(error) {...} 语句只能捕获等待执行以后的reject的promise结果！