浅析JS的异步函数async/await

本篇文章带大家了解一下javascript的异步函数 async/await,希望对大家有所帮助!

浅析JS的异步函数async/await

ES7 引入的 async/await 是对 JavaScript 异步编程的一种改进,它提供了使用同步样式代码异步访问资源的选项,而不会阻塞主线程。但是,要很好地使用它有点棘手。在本文中,将从不同的角度探索 async/await,并展示如何正确有效地使用它们。

async/await 好处

async/await 带来的最重要的好处就是同步编程风格,先来看一个例子。

// async/awaitconst getArticlesByAuthorWithAwait = async (authorId) => {    const articles = await articleModel.fetchAll();    return articles.filter((b) => b.authorId === authorId);};// promiseconst getArticlesByAuthorWithPromise = (authorId) => {    return articleModel        .fetchAll()        .then((articles) => articles.filter((b) => b.authorId === authorId));};

很明显,async/await 版本比 promise 版本更容易理解。如果忽略 await 关键字,代码看起来就像任何其他同步语言,如 Python

同时 async/await 有原生浏览器支持,截至目前,所有主流浏览器都已全面支持异步功能。

需要注意的是 async/await 在使用的过程中需要成对出现,如在函数里面要使用 await ,就必须将函数定义为 async 。

async/await 可能会产生误导

有些文章将 async/awaitPromise 进行比较,并声称它是 JavaScript 异步编程发展的下一代,这一点个人觉得有点误导,个人认为 async/await 是一种改进,一个语法糖,不会彻底改变编程风格。

本质上,异步函数仍然是 promises,在正确使用异步函数之前,必须了解 promises

Promise.any() 原理解析及使用指南Promise.all() 原理解析及使用指南Promise.race() 原理解析及使用指南Promise.allSettled() 原理解析及使用指南

async/await 陷阱

尽管 await 可以使代码看起来像同步的,但请记住它们仍然是异步的,必须注意避免过于顺序化。

即构数智人 即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台,支持数字人形象定制、短视频创作、数字人直播等。

即构数智人 36 查看详情 即构数智人

const getArticlesAndAuthor = async (authorId) => {    const articles = await articleModel.fetchAll();    const author = await authorModel.fetch(authorId);    return {        author,        articles: articles.filter((article) => article.authorId === authorId),    };};

这段代码在逻辑上看起来是正确的,然而这是回产生误解。

await articleModel.fetchAll() 将等到 fetchAll() 返回。

然后 await authorModel.fetch(authorId) 将会被立即调用。

错误处理

使用 promise,异步函数有两个可能的返回值:resolvereject,以用于正常情况使用 .then() 和异常情况使用.catch()。然而,async/await 错误处理就不太好,需要使用 try...catch 来捕获异常。

const getArticlesByAuthorWithAwait = async (authorId) => {    try {        const articles = await articleModel.fetchAll();        return articles.filter((b) => b.authorId === authorId);    } catch (error) {        // 错误处理    }};

总结

async/await 非常强大,但也有一些注意事项。但是如果正确使用它们,还是有助于使代码高效并且高可读。

【推荐学习:javascript高级教程】

以上就是浅析JS的异步函数async/await的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/544060.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
叠纸游戏《无限暖暖》GDC执行制作人演讲
上一篇 2025年11月9日 16:36:56
整出了微软Copilot没落地的活儿,WPS AI这波更新有点狠。
下一篇 2025年11月9日 16:36:59

相关推荐

  • 如何让你的Magento2商店说法语?使用Composer轻松部署多语言包

    可以通过一下地址学习composer:学习地址 我最近在负责一个magento 2电商平台,老板雄心勃勃地想拓展法国市场。然而,摆在我面前的第一个难题就是:如何让我的英文商店“说”法语?如果用户访问网站时看到的是熟悉的母语界面,无疑会大大提升他们的购物体验,增加转化率。 最初,我考虑过手动下载法语语…

    用户投稿 2026年8月26日
    000
  • safari浏览器“网页进程意外终止”是什么问题_safari浏览器网页进程意外终止原因

    网页进程意外终止通常由缓存损坏、系统过时、插件冲突、网络异常或实验性功能导致。1、清除Safari历史记录与网站数据;2、更新iOS至最新版本;3、禁用第三方内容拦截器;4、还原网络设置;5、关闭实验性功能与桌面模式,恢复默认配置以解决问题。 如果您在使用 Safari 浏览器时,遇到页面突然关闭或…

    2026年8月26日
    000
  • 如何解决垃圾注册?LaravelCloudflareTurnstile帮你轻松搞定!

    在使用 Laravel 开发网站时,经常会遇到垃圾注册和恶意攻击的问题。传统的验证码(如 reCAPTCHA)虽然可以起到一定的防护作用,但用户体验往往不佳。而且,reCAPTCHA 在国内访问不稳定,经常出现无法加载的情况。 最近,我发现了一个非常棒的 laravel 包: ryangjchand…

    用户投稿 2026年8月26日
    000
  • VSCode怎么自动生成HTML_VSCode快速生成HTML基础模板结构教程

    输入!按Tab即可生成HTML5模板,VSCode通过Emmet实现高效编码,支持自定义片段和高级缩写,提升开发效率。 说实话,刚开始用VSCode写HTML的时候,我也觉得每次都要手动敲 、 、 那些东西挺麻烦的。后来才发现,VSCode在快速生成HTML基础模板结构这方面做得真是相当到位,主要就…

    2026年8月26日
    000
  • PHPComposer是什么_PHP包管理工具Composer入门

    Composer 是 PHP 依赖管理工具,可声明并自动安装第三方库、生成自动加载文件。通过 composer.json 定义依赖,composer.lock 锁定版本,vendor 目录存放库文件,使用 composer init 初始化项目,composer require 添加依赖,requi…

    2026年8月26日
    000
  • VSCode字体颜色怎么调_VSCode编辑器语法高亮和主题色自定义教程

    调整VSCode字体颜色需通过修改主题或编辑settings.json文件,核心是利用workbench.colorCustomizations和editor.tokenColorCustomizations配置项,结合Developer: Inspect Editor Tokens and Sco…

    2026年8月26日
    300
  • 聊聊zfs中的write

    以下是关于zfs和zpool的伪原创内容,保持了原文的结构和大意,同时进行了改写: // 创建一个zpool$ modprobe zfs$ zpool create -f -m /sample sample -o ashift=12 /dev/sdc$ zfs create sample/fs1 -…

    2026年8月26日
    000
  • 随便记录下系列 – node->express

    系列记录 – node.js到express的一站式指南 一、在Windows上安装Node.js环境:从官方网站下载Node.js,需替换下载链接 https://nodejs.org/dist/v6.2.0/node-v6.2.0-x64.msi 中的版本号6.2.0为所需版本即可。…

    2026年8月25日
    500
  • 抖音小程序是用什么语音做的

    抖音小程序由字节跳动自主研发,基于其自有的“字节跳动小程序”技术框架构建。该框架在设计上借鉴了微信小程序的开发模式,同时融合了平台自身的特点与需求。开发者可通过 JavaScript、HTML 和 CSS 完成前端界面与逻辑开发,后端则可灵活选用多种服务端语言和技术进行对接。 抖音小程序的技术架构解…

    2026年8月25日
    100
  • 如何解决JWT等安全令牌的复杂性和安全隐患,使用PASETO构建更安全的平台无关安全令牌

    可以通过一下地址学习composer:学习地址 在当今高度互联的数字世界里,无论是用户登录、api访问还是微服务间的通信,安全令牌都扮演着至关重要的角色。其中,json web tokens (jwt) 因其无状态、可扩展的特性,被广泛应用于各种场景。然而,随着我深入开发和维护多个项目,我开始对jw…

    用户投稿 2026年8月25日
    100
  • 告别文件类型识别难题:adrienrn/php-mimetyper助你轻松搞定MIME类型

    最近在开发一个文件上传和下载相关的模块时,我遇到了文件类型识别的问题。我需要根据文件的扩展名来判断其 MIME 类型,以便正确地处理这些文件。然而,我发现 PHP 内置的函数或者一些简单的库并不能提供足够准确和全面的 MIME 类型映射。一些文件类型的识别不够准确,而且缺少对一些常见文件类型的支持。…

    用户投稿 2026年8月25日
    400
  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    300
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    900
  • 聊聊怎么利用CSS实现波浪进度条效果

    聊聊怎么利用CSS实现波浪进度条效果聊聊怎么利用CSS实现波浪进度条效果聊聊怎么利用CSS实现波浪进度条效果聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 用户投稿
    500
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    巧用距离、角度及光影制作炫酷的 3D 文字特效巧用距离、角度及光影制作炫酷的 3D 文字特效巧用距离、角度及光影制作炫酷的 3D 文字特效巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 用户投稿
    100
  • CSS高阶技巧:实现图片渐隐消的多种方法

    CSS高阶技巧:实现图片渐隐消的多种方法CSS高阶技巧:实现图片渐隐消的多种方法CSS高阶技巧:实现图片渐隐消的多种方法CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 用户投稿
    200
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    200
  • CSS flex布局属性:align-items和align-content的区别

    CSS flex布局属性:align-items和align-content的区别CSS flex布局属性:align-items和align-content的区别CSS flex布局属性:align-items和align-content的区别CSS flex布局属性:align-items和align-content的区别

    在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义flex容器中元素在交叉轴(主轴为flex-deriction定义的方向,默认为row,那么交叉轴跟主轴垂直即为column,反之它们互调,flex基本的概念如下图所示)…

    2025年12月24日 用户投稿
    200
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    手把手教你用 transition 实现短视频 APP的点赞动画手把手教你用 transition 实现短视频 APP的点赞动画手把手教你用 transition 实现短视频 APP的点赞动画手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS …

    2025年12月24日 用户投稿
    100
  • 巧用CSS实现各种奇形怪状按钮(附代码)

    巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)

    本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助! 怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 css 实现稍微有点难度和技巧性的按钮,讲解使用 css 如何尽可能的实现它们。【推荐学习:…

    2025年12月24日 用户投稿
    200

发表回复

登录后才能评论
关注微信