async/await让异步操作同步执行的方法详解


Posted in Javascript onNovember 01, 2019

一.前言

我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了

二.异步操作会带来什么问题

异步操作可能会许多的问题,下面是常见的两种

1.函数执行的结果并不是按照顺序返回

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },3000)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();

//结果
//111
//222
//wait me 3000

上面的代码,如果你期待的结果是

//111
//wait me 3000
//222

那就错了,因为fn1函数里面还有一个函数setTimeout,这两个函数是异步执行的,而fn1和fn2是同步执行的,先执行fn1再执行fn2,在执行fn1的时候打印结果111,三秒后再执行setTimeout,但是在这三秒之前已经执行完了fn2

那是不是由于setTimeout函数设置的等待时间太久了才会导致的呢?那下面我把时间设为0

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },0)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();
//结果
//111
//222
//wait me 3000

从结果上看并没有改变,这是应为setTimeout这个函数在执行之前会查看执行队列看看有没有人在排队,如果有,那么将等其他的函数执行完再执行自己,所以不管就算你设置时间为0,也不会改变它最后一个执行

2.在外部获取不到异步函数里的值

下面我们看一个最简单的例子,我的需求是要在fn1函数外面打印msg

function fn1(){
 setTimeout(function(){
  msg='wait me 3000';
 },3000);
}
fn1();

那么怎么样才能获取到msg呢

使用回调函数

function fn1(callback){
 setTimeout(function(){
  msg='wait me 3000';
  callback(msg);
 },3000);
}
fn1(data=>{
 console.log(data);//wait me 3000
});

使用Promise

function fn1(){
 return new Promise(function(res,rej){
  setTimeout(function(){
   msg='wait me 3000';
   res(msg);
  },3000);
 })
}
fn1().then(data=>{
 console.log(data)
})

三.async/await解决方案

async/await的作用就是使异步操作以同步的方式去执行

异步操作同步化?

可以使用Promise中的then()来实现,那么async/await与它之间有什么区别呢

1.async函数返回的是一个Promise对象

如果一个函数加了async关键词,这个函数又有返回值,在调用这个函数时,如果函数执行成功,内部会调用Promise.solve()方法返回一个Promise对象,如果函数执行出现异常,就会调用Promise.reject()方法返回一个promise 对象

要想获取到async函数的执行结果,就要调用Promise的then或catch来给它注册回调函数

async function fn(){
 return '111'
}
console.log(fn());//Promise { '111' }

既然是Promise对象,因此可以使用then()获取返回的结果

async function fn(){
 return '111'
}
fn().then(data=>{
 console.log(data)//111
})

2.await

上面介绍了async的作用,一般情况下,async与await配合使用才能使异步操作同步化,await就是等待的意思,等待某一个函数执行完之后,后面的代码才能开始执行

function fn1(){
 return new Promise(resolve=>{
  setTimeout(function(){
   msg='wait me 3000';
   resolve(msg)
  },3000);
 });
}
async function asyncCall(){
 var result=await fn1();
 console.log(result); 
}
asyncCall();

如果我们没有等待fn1执行完之后再打印result,那么有可能得到是undefined

四.总结

在很多的时候,我们是希望按照同步的方式来获得异步函数的结果,比如登录时,我们必须要在后台返回匹配成功的信息之后才能进行页面跳转,因此,使异步操作同步化这是很重要的知识点,但是这种方案是基于Promise的基础之上的,因此在学习该知识时,一定要对Promise有充分的理解

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
js new Date()实例测试
Oct 31 #Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 #Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
DOM 高级编程
2015/05/06 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python操作 hbase 数据的方法
2016/12/18 Python
python实现SOM算法
2018/02/23 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python爬取微信公众号文章
2018/08/31 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
春节活动策划方案
2014/01/24 职场文书
内衣营销方案
2014/03/15 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
认识实习感想
2015/08/10 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python