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 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
jquery事件与绑定事件
Mar 16 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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
资料注册后发信小技巧
2006/10/09 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
javascript数组定义的几种方法
2017/10/06 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2016年国培研修日志
2015/11/13 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书