位置: IT常识 - 正文

异步函数async(异步函数执行顺序)

编辑:rootadmin
异步函数async 什么是同步异步

推荐整理分享异步函数async(异步函数执行顺序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:异步函数同步执行,异步函数中需要等数据获取完,wx.navigateTo才跳转,异步函数同步执行,异步函数同步执行,异步函数是什么意思,异步函数有哪些,异步函数的作用,异步函数和同步函数,内容如对您有帮助,希望把文章链接给更多的朋友!

在最新的ES7(ES2017)中提出的前端异步特性:async、await。 在了解async和await之前得先明白什么是同步函数,什么是异步函数。

同步函数:当一个函数是同步执行时,那么当该函数被调用时不会立即返回,直到该函数所要做的事情全都做完了才返回。比如说在银行排队办理业务,要等到前面一个人办完才能到下一个。异步函数:如果一个异步函数被调用时,该函数会立即返回尽管该函数规定的操作任务还没有完成。比如一个人边吃饭,边看手机,边说话,就是异步处理的方式。async

async从字面意思上很好理解,是异步的意思,async用于申明一个function是异步的,函数返回的是一个promise。

async作为关键字放到函数前面,用于表示函数是一个异步函数。该函数的执行不会阻塞后面代码的执行。async函数返回的是一个promise对象,可以调用then方法获取到promise的结果值。async function f() { return 1; } f().then((res) => { console.log(res) }) //1

async函数会返回一个promise对象,如果function中返回的是一个值,async直接会用Promise.resolve()包裹一下返回。

await

await有等待的意思,等待一个异步方法执行完成。

await关键字只能放async函数里面。 而async函数里不是必须有await。await关键字的返回结果就是其后 promise执行的结果值,是resolved或者 rejected后的值。function getSomething() { return "something"; } async function testAsync() { return Promise.resolve("hello async"); } async function test() { const v1 = await getSomething(); const v2 = await testAsync(); console.log(v1, v2); } test(); // something hello async 为什么await关键词只能在async函数中用

await操作符等的是一个返回的结果,那么如果是同步的情况,那就直接返回了。

那如果是异步的情况呢,异步的情况下,await会阻塞整一个流程,直到结果返回之后,才会继续下面的代码。

阻塞代码是一个很可怕的事情,而async函数,会被包在一个promise中,异步去执行。所以await只能在async函数中使用,如果在正常程序中使用,会造成整个程序阻塞,得不偿失。

async/await异步函数async(异步函数执行顺序)

异步代码就像写同步代码一样,也避免了回调地狱。

串行:等待前面一个await执行后接着执行下一个await,以此类推async function asyncAwaitFn(str) { return await new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); })}const serialFn = async () => { //串行执行 console.log(await asyncAwaitFn('string 1')); console.log(await asyncAwaitFn('string 2')); console.timeEnd('serialFn ')}serialFn();

并行:将多个promise直接发起请求(先执行async所在函数),然后再进行await操作async function asyncAwaitFn(str) { return await new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); })}const parallel = async () => { //并行执行 const parallelOne = asyncAwaitFn('string 1'); const parallelTwo = asyncAwaitFn('string 2') //直接打印 console.log(await parallelOne) console.log(await parallelTwo) console.timeEnd('parallel')}parallel()

async、await错误处理

在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

async function catchErr() {try {const errRes = await new Promise((resolve, reject) => {setTimeout(() => {reject("http error...");}, 1000););//平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功// console.log(errRes.status, errRes.statusText); } catch(err) { console.log(err); }}catchErr(); //http error...

虽然async、await也使用到了Promise但是却减少了Promise的then处理使得整个异步请求代码清爽了许多。

前面扯了这么多,也是时候回到正题了,我们先来看下面的一个例子。 我们需要做一个功能,在页面加载的时候实现查询三组数据:查询用户、查询朋友、查询图片。

class Api { constructor () { this.user = { id: 1, name: 'test' } this.friends = [ this.user, this.user, this.user ] this.photo = 'not a real photo' } getUser () { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.user), 200) }) } getFriends (userId) { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.friends.slice()), 200) }) } getPhoto (userId) { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.photo), 200) }) } throwError () { return new Promise((resolve, reject) => { setTimeout(() => reject(new Error('Intentional Error')), 200) }) }}

在上面定义了API的类,里面写了三个封装的查询接口。现在要依次执行那三个操作。 第一种方法:Promises的嵌套:

function callbackHell () { const api = new Api() let user, friends api.getUser().then(function (returnedUser) { user = returnedUser api.getFriends(user.id).then(function (returnedFriends) { friends = returnedFriends api.getPhoto(user.id).then(function (photo) { console.log('callbackHell', { user, friends, photo }) }) }) })}

从上面可以看出,这代码块很简单,但它有很长、很深的嵌套。

这只是简单的函数内容,但在真实的代码库中,每个回调函数可能会很长的代码,这就可能会导致代码变得庞大难读懂。处理此类代码,在回调内的回调中使用回调,通常称为“回调地狱”。

更糟糕的是,没有错误检查,因此任何回调都可能作为未处理的resove/reject而失败。 第二种方法:Promises链:

function promiseChain () { const api = new Api() let user, friends api.getUser() .then((returnedUser) => { user = returnedUser return api.getFriends(user.id) }) .then((returnedFriends) => { friends = returnedFriends return api.getPhoto(user.id) }) .then((photo) => { console.log('promiseChain', { user, friends, photo }) })}

Promises的一个不错的功能是,可以通过在每个回调中返回另一个Promises来链接它们。这样,我们可以将所有回调保持在相同的缩进级别。我们还可以使用箭头函数来简化回调函数的

本文链接地址:https://www.jiuchutong.com/zhishi/298721.html 转载请保留说明!

上一篇:2022前端面经---改变this指向问题(call、apply、bind)(2021年前端面试)

下一篇:【Vue3】如何创建Vue3项目及组合式API(创建vue3项目的步骤)

  • 优酷vip怎么升级酷喵vip(优酷vip怎么升级快)

    优酷vip怎么升级酷喵vip(优酷vip怎么升级快)

  • 京东查物流单号查询在哪(京东查物流单号查询)

    京东查物流单号查询在哪(京东查物流单号查询)

  • 小米6手环怎么设置壁纸(小米6手环怎么开机)

    小米6手环怎么设置壁纸(小米6手环怎么开机)

  • 魅族18支持的音频格式有哪些(魅族18有音乐芯片吗)

    魅族18支持的音频格式有哪些(魅族18有音乐芯片吗)

  • 抖音怎么回放直播(抖音直播怎么能回放)

    抖音怎么回放直播(抖音直播怎么能回放)

  • 朋友圈转发图片和文字怎么转发(朋友圈转发图片游戏)

    朋友圈转发图片和文字怎么转发(朋友圈转发图片游戏)

  • 华为手机用户体验计划在哪(华为手机用户体验改进计划可以关闭吗)

    华为手机用户体验计划在哪(华为手机用户体验改进计划可以关闭吗)

  • 快手读取不到本地音乐(快手不能读取图库里照片怎么办)

    快手读取不到本地音乐(快手不能读取图库里照片怎么办)

  • 高速内存卡怎么区分(高速内存卡怎么区分A1和A3)

    高速内存卡怎么区分(高速内存卡怎么区分A1和A3)

  • 抖音直播电视剧可以吗(抖音直播电视剧版权如何申请)

    抖音直播电视剧可以吗(抖音直播电视剧版权如何申请)

  • 腾讯会议能强制开麦吗(腾讯会议能强制关别人的麦吗)

    腾讯会议能强制开麦吗(腾讯会议能强制关别人的麦吗)

  • 拼多多万人团不满就取消吗(拼多多万人团不能直接免拼)

    拼多多万人团不满就取消吗(拼多多万人团不能直接免拼)

  • 荣耀20i支持快充吗(荣耀20i支持快充电吗)

    荣耀20i支持快充吗(荣耀20i支持快充电吗)

  • 手机无面容是什么意思(无面容手机影响使用吗?)

    手机无面容是什么意思(无面容手机影响使用吗?)

  • 华为nova4e可以长截屏吗(华为nova 4怎么长截屏)

    华为nova4e可以长截屏吗(华为nova 4怎么长截屏)

  • 微信语音闭麦对方知道吗(微信语音闭麦对方能听到我在别的软件说话吗)

    微信语音闭麦对方知道吗(微信语音闭麦对方能听到我在别的软件说话吗)

  • 桌面快捷方式怎么设置(桌面快捷方式怎么恢复)

    桌面快捷方式怎么设置(桌面快捷方式怎么恢复)

  • 微信置顶的字怎么设置(微信置顶上面的字)

    微信置顶的字怎么设置(微信置顶上面的字)

  • 华为mate30如何装双卡(华为mate30如何装google play)

    华为mate30如何装双卡(华为mate30如何装google play)

  • iphone7升级ios13卡吗(苹果7更新13系统变卡)

    iphone7升级ios13卡吗(苹果7更新13系统变卡)

  • 微信即刻视频怎么设置(微信即刻视频怎么保存)

    微信即刻视频怎么设置(微信即刻视频怎么保存)

  • matlab解微分方程组(matlab解微分方程平衡点)

    matlab解微分方程组(matlab解微分方程平衡点)

  • iPhone手机如何刷到监管模式(iphone手机如何刷门禁卡)

    iPhone手机如何刷到监管模式(iphone手机如何刷门禁卡)

  • 针孔摄像头需要网络吗

    针孔摄像头需要网络吗

  • vivoy93的导航键在哪里(vivoy31s导航键)

    vivoy93的导航键在哪里(vivoy31s导航键)

  • 荣耀20pro有红外遥控吗(荣耀80有没有红外线功能)

    荣耀20pro有红外遥控吗(荣耀80有没有红外线功能)

  • i7 5960X评测跑分参数介绍

    i7 5960X评测跑分参数介绍

  • 增值税普通
  • 其他综合收益影响递延所得税负债吗
  • 怎么控制酒店的设备
  • 进口原材料关税税率是多少
  • 进项税抵扣销项税
  • 多计提以前年度损益调整账务处理怎么做
  • 解除合同补偿金需要缴纳个税吗
  • 合伙企业交个税例题
  • 房产税逾期有滞纳金吗
  • 进项税使报表应交税费负数如何处理?
  • 没有费用报销单发票可以直接报销吗
  • 材料报废的会计处理(一般纳税人)
  • 固定资产怎么进入生产成本
  • 扣收手续费
  • 如果工程款要不到的话怎么办
  • 租赁物丢失如何赔偿
  • 出口企业收到的货款是人民币还是美元
  • 免税农产品发票可以抵扣么
  • 出口加工区内企业不能从事的业务有
  • 装修公司购装修材料入什么科目?
  • 基本户收到个人款项的分录
  • win7如何设置高级网卡功能适合玩网络游戏
  • 跨年期许
  • 印花税减半征收优惠政策2023
  • 长期待摊费用账务处理包括哪两部分
  • 无形资产的摊销怎么算
  • 远程主机强迫关闭了现有连接我的世界
  • linux系统用法
  • 硬盘的转速有什么用
  • php imagestring
  • php array_map 和 foreach性能
  • 结转出租包装物因不能使用而报废的残料价值
  • laravel实战教程
  • flex布局适用于哪些场景
  • 资产处置损益要写明细账吗
  • php扫二维码
  • 加计抵减现代服务税率
  • 线性回归csdn
  • vue中使用jsx语法
  • 微信公众号开发用什么语言
  • 金蝶会计报表公式
  • 公司项目支付的钱叫什么
  • 建筑安装工人住宿费会计分录
  • mysql怎么修改
  • 个人接私活需要什么条件
  • 外国常驻代表机构经费支出范围
  • 销售退回 所得税
  • 暂估入库的商品能出库吗
  • 公司找的第三方代缴社保
  • 计提印花税会计分录
  • 损益类会计科目有哪些
  • 员工借款未还财务有责任吗
  • 工会经费结余可以结转下年吗
  • 免抵税额分录
  • 工程项目立项前包括哪几个过程
  • 生产成本的会计科目分录
  • 上个月的发票可以作废吗
  • 收到政策性搬迁短信
  • 会计记账凭证样本
  • sql server 2000安装好打开不显示名称和服务原因
  • win7用u盘怎么重装系统
  • 在服务器上创建用户
  • windos8怎么样
  • win10自带邮箱无法使用126
  • win7总是显示正在连接虚拟磁盘服务怎么办
  • Linux通过netstat命令查看80端口连接数的方法
  • cocos2d-x教程
  • jquery实现select选择框内容左右移动代码分享
  • node.js编译
  • margin-left auto
  • 最流行的民宿装修设计
  • unity协程会阻塞主线程吗
  • nodejs开启多线程
  • unity教程完整版
  • javascipt:void
  • unity2d寻路
  • 安卓9api
  • 重庆地方税务局12366
  • 增值税电子普通发票需要盖章吗
  • 银行理财收入如何记账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设