位置: 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项目的步骤)

  • javascript function(javascript function 对象)

    javascript function(javascript function 对象)

  • 建行流水手机银行可以导出吗(建行流水手机银行解压密码怎么找)

    建行流水手机银行可以导出吗(建行流水手机银行解压密码怎么找)

  • 荣耀30pro+充满电要多久呢(荣耀30pro+充满电要多久)

    荣耀30pro+充满电要多久呢(荣耀30pro+充满电要多久)

  • 苹果xr怎么设置信号好一点(苹果xr怎么设置指纹密码锁)

    苹果xr怎么设置信号好一点(苹果xr怎么设置指纹密码锁)

  • 打电话手机关机的提示音(打电话手机关机的提示语)

    打电话手机关机的提示音(打电话手机关机的提示语)

  • 钉钉订正作业有记录吗(钉钉作业订正后老师能看到吗)

    钉钉订正作业有记录吗(钉钉作业订正后老师能看到吗)

  • 快手的聊天室在哪里找(快手的聊天室在哪里打开)

    快手的聊天室在哪里找(快手的聊天室在哪里打开)

  • 剪映能导入gif吗(剪映不可以导入动图吗)

    剪映能导入gif吗(剪映不可以导入动图吗)

  • 苹果7a1778是什么版本(苹果7a1778是什么版本基带)

    苹果7a1778是什么版本(苹果7a1778是什么版本基带)

  • ods是什么文件格式(ods是什么文档)

    ods是什么文件格式(ods是什么文档)

  • 有线和无线的区别(有线和无线的区别耳机)

    有线和无线的区别(有线和无线的区别耳机)

  • 手机克隆是不是只有华为手机才能接收(手机克隆是不是把所有的app都克隆了)

    手机克隆是不是只有华为手机才能接收(手机克隆是不是把所有的app都克隆了)

  • iphonexr好久开售(iphonexr什么时候有货)

    iphonexr好久开售(iphonexr什么时候有货)

  • 米8青春版是不是快充(米8青春版有nfc功能吗)

    米8青春版是不是快充(米8青春版有nfc功能吗)

  • 购物津贴在哪里领取(购物津贴在哪里看)

    购物津贴在哪里领取(购物津贴在哪里看)

  • 苹果6sp有没有必要升ios13(6sp还在用)

    苹果6sp有没有必要升ios13(6sp还在用)

  • 华为mate30pro屏幕可以贴膜吗(华为mate30pro屏幕多大)

    华为mate30pro屏幕可以贴膜吗(华为mate30pro屏幕多大)

  • m4a是什么软件录音的(怎样录m4a音频要下载什么软件?)

    m4a是什么软件录音的(怎样录m4a音频要下载什么软件?)

  • 上机是什么意思(股票上机是什么意思)

    上机是什么意思(股票上机是什么意思)

  • iphone11有nfc吗(iphone11有nfc吗怎么使用)

    iphone11有nfc吗(iphone11有nfc吗怎么使用)

  • 2000毫安等于多少安(2000毫安等于多少瓦)

    2000毫安等于多少安(2000毫安等于多少瓦)

  • skyworth怎么用手机投屏(skyworth怎么用手机投屏苹果)

    skyworth怎么用手机投屏(skyworth怎么用手机投屏苹果)

  • 手机怎么把视频剪短(手机怎么把视频转换成音频)

    手机怎么把视频剪短(手机怎么把视频转换成音频)

  • 拉贾安帕特群岛中的瓦亚格岛,印度尼西亚 (© Amazing Aerial Agency/Offset by Shutterstock)(拉贾安帕特群岛地图中文版)

    拉贾安帕特群岛中的瓦亚格岛,印度尼西亚 (© Amazing Aerial Agency/Offset by Shutterstock)(拉贾安帕特群岛地图中文版)

  • 业务招待费福利费怎么算超支
  • 财税实务与核算会计的区别在哪里?
  • 小规模纳税人开普票要交税吗
  • 股权转让的相关文件有哪些
  • 应交消费税的税目
  • 个人出租住房需要缴纳哪些税
  • 已暂估入库原材料,确认收不到发票怎么调账
  • 出口退税中的免抵税额可以认为是交的税吗
  • 减免税款计入哪个科目
  • 个人独资企业有股权吗
  • 小企业会计准则以前年度损益调整
  • 供应商货款打折分录
  • 以前年度损益调整属于哪类科目
  • 分配利润和分配股利
  • 企业购买房产可以抵扣增值税吗
  • 公司工资发放错误怎么退回
  • 快递费开专票怎么入账
  • 税务稽查补缴的税款需要申报吗
  • 固定成本与变动成本的区别
  • 失控发票的账务处理
  • 各地土地使用税区域差距大
  • 旧设备出口要交增值税吗
  • 从租计征的税率
  • 金税盘基本信息设置
  • 个税0申报逾期一年
  • 当月应计提的折旧额等于
  • 负债的情况
  • 抵押质押的含义
  • 公司股权分红款需要税吗
  • 帮忙介绍业务
  • 单位代缴住房公积金分录
  • 摊余成本计入哪个科目
  • linux设置壁纸的命令
  • 不能运行windows10的设备有哪些
  • 营改增后企业一般纳税人认定标准为
  • 股权转让定金怎么做账
  • PHP:imagedestroy()的用法_GD库图像处理函数
  • 程序人是什么意思
  • 人工智能该如何规划软件工程师岗位
  • pytorch jit
  • 动态规划知乎
  • 织梦常用调用标签
  • 个税显示退税成功但是没有收到钱
  • 发票上没有数量可以吗
  • 个人所得税的减免政策有哪些
  • sql server临时表的生命周期
  • 律师跨省办案
  • 成本类账户期末如有余额在借方
  • 冲减当期利润
  • 公司发放节日礼品
  • 运输公司自有车辆是什么意思
  • 收到稳岗补贴要交税吗
  • 租金是含税价还是含税金
  • mysql获取数据库表名
  • mysql怎么修改用户名和密码
  • ubuntu 手动安装
  • MySQL5.6.31 winx64.zip 安装配置教程详解
  • centos如何查看所有用户
  • drvceox86.exe
  • win7 64位系统无法清空回收站的故障原因及解决方法
  • 怎样设置Win XP下安装打印机驱动程序
  • win10系统怎么安装qq
  • win10周年更新版是什么意思
  • javascript definitive guide
  • cocos2djs
  • python读json文件和写json文件
  • vue打包页面空白
  • node.js nvm
  • jquery设置图片大小
  • 异步任务管理器
  • javascript教程代码
  • js所有知识点
  • 公司被分立,应将分立后的单位
  • 电子税务局讲解
  • 进口完税价格包括哪些部分
  • 土地使用税一般谁交
  • 13%增值税发票怎么抵扣
  • 四川社保每年几月份交费
  • 2022年印花税最新规定反映了什么
  • 鞋类进口关税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设