从 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  的。


相关文章
|
Docker 容器
【registry】docker 私有仓库实现https 访问
【registry】docker 私有仓库实现https 访问
1812 2
【registry】docker 私有仓库实现https 访问
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
Rust 网络协议 应用服务中间件
granian:让你的 Web 应用程序快如闪电
granian:让你的 Web 应用程序快如闪电
979 2
|
Kubernetes 监控 调度
k8s学习--kubernetes服务自动伸缩之垂直伸缩(资源伸缩)VPA详细解释与安装
k8s学习--kubernetes服务自动伸缩之垂直伸缩(资源伸缩)VPA详细解释与安装
561 2
|
边缘计算 人工智能 数据处理
大模型能否通往AGI?
【2月更文挑战第29天】复旦大学张奇教授探讨大模型与人工通用智能(AGI)关系,指出大模型研发需大量资源,企业成为推动力,强调中国应加强自主创新。新书《大规模语言模型:从理论到实践》探讨合作模式及技术细节。张教授认为大模型处理多模态信息有挑战, Scaling Law存在争议,小模型在特定场景有优势。目前大模型尚未达到AGI的推理能力,实现商业化需平衡成本与收益。他通过项目展示大模型的社会应用潜力。
1022 1
大模型能否通往AGI?
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
1138 0
|
并行计算 TensorFlow 算法框架/工具
Windows10下CUDA9.0+CUDNN7.0.5的完美安装教程
该文介绍了如何在Windows 10上安装CUDA 9.0和cuDNN 7.0.5以支持Tensorflow-gpu 1.10.0。首先,解释了安装CUDA的原因,然后详细步骤包括:从NVIDIA官网下载CUDA 9.0,选择自定义安装并关闭不必要的组件,检查显卡驱动版本以决定是否安装Display Driver,最后确认安装成功。接着,下载cuDNN需要注册NVIDIA账户,解压后将文件复制到CUDA安装目录。整个过程旨在确保与Tensorflow-gpu 1.10.0的兼容性。
1147 2
|
SQL 测试技术 数据库
【SQL】已解决:SQL错误(15048): 数据兼容级别有效值为100、110或120
【SQL】已解决:SQL错误(15048): 数据兼容级别有效值为100、110或120
458 0
|
前端开发 JavaScript
纯前端用XLSX库导出excel,可含多个sheet
纯前端用XLSX库导出excel,可含多个sheet
942 0

热门文章

最新文章