从 async 和 await 函数返回值说原理

简介: 昨天在文章《JavaScript中的 async 和 await》中简单的介绍了其使用方法。那么 async 和 await 如何工作,如何正确的使用 async 和 await 。

昨天在文章《JavaScript中的 async 和 await》中简单的介绍了其使用方法。那么 async 和 await 如何工作,如何正确的使用 async 和 await 。

什么是 async 和 await ?

简单来说,它们是 promise 嵌套的语法糖,来看一个实例:

async function helloAsync() {
    const result = await new Promise((resolve) =>
        setTimeout(() => resolve("Hello"))
    );
    console.log(result); // Hello
}
helloAsync();

运行上面的代码,函数将输出 “Hello”,结果显而易见,其中 await 将阻塞主线程,直到 promise 处理完成。

async

async 函数使我们能够编写基于 promise 的代码,就像它是同步的一样,但不会阻塞执行线程。通过事件循环异步运行,async 函数将始终返回一个值。使用 async 简单地将返回一个 promise,如果 apromise 没有返回,会自动将它包装在一个 promise 带有它的值的 resolve 中。

await

await 运算符用于等待 promise ,它只能在 async 块内使用。关键字 await 使 JavaScript 等待直到 promise 返回结果。

需要注意的是,它只是让 async 功能块等待,而不是整个程序执行。不能在常规函数中使用 await 关键字。

猜猜下面代码片段的输出

async function helloAsync() {
    const result = await new Promise((resolve) =>
        setTimeout(() => resolve("Hello"))
    );
    return result;
}
let asyncResult = helloAsync();
console.log("helloAsync返回值:" + JSON.stringify(asyncResult));

根据上面的代码,可能会认为输出 “Hello” ,对与错要眼见为实,复制上面的代码运行后,输出为:asyncResult值:{},从输出来看,变量 asyncResult 的值为 {}

为什么会这样?

因为异步函数总是返回一个承诺,而不是解决上面例子中的承诺,我们试图从中提取价值。

如何解决?

由于 async 函数在上面的代码片段中返回了一个 promise 对象,那么就可以使用 .then 方法获取 async 函数的处理结果。下面的代码可以正常打印  async 函数的执行结果。

async function helloAsync() {
    const result = await new Promise((resolve) =>
        setTimeout(() => resolve("Hello"))
    );
    return result;
}
helloAsync().then((data) => {
    console.log("helloAsync返回值:" + JSON.stringify(data));
});

更好的方法

使用 asyncawait 主要是想避免使用 promise 链或 .then 表达式,所以可以使用 asyncawait 本身来解决 promise,而不是使用 .then,下面代码为推荐使用方式:

async function helloAsync() {
    const result = await new Promise((resolve) =>
        setTimeout(() => resolve("Hello"))
    );
    return result;
}
async function testHelloAsync() {
    const output = await helloAsync();
    console.log("helloAsync返回值:" + JSON.stringify(output));
}
testHelloAsync();

总结

在实际开发项目中,是使用 Promises 还是 Async/Await 没有好坏之分,取决于开发人员,我个人当前是偏向使用 Promises  的。


相关文章
|
6月前
|
前端开发
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
|
1天前
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
16 4
|
6月前
|
前端开发 JavaScript 开发者
阿珊带你深入理解 async/await 函数
阿珊带你深入理解 async/await 函数
|
4月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
55 1
|
6月前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
6月前
|
前端开发
promise和async的区别是什么?
promise和async的区别是什么?
84 1
|
6月前
|
前端开发
async/await返回的promise被解析为undefined的可能原因
`async/await` 通常与 `Promise` 一起使用,但如果返回的 `Promise` 被解析为 `undefined`,可能有几个原因。以下是一些可能的情况和解决方法
|
JavaScript 前端开发 Go
async vs defer 的区别
async vs defer 的区别
73 0
|
6月前
|
JSON 前端开发 JavaScript
async/await语法
async/await语法
56 0
|
JavaScript 前端开发
asyns和await用法?
asyns和await用法?