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 相关文章推荐
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python hook监听事件详解
2018/10/25 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python API自动化框架总结
2019/11/12 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
物业电工岗位职责
2013/11/20 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
化学教育专业求职信
2014/07/08 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
监察建议书
2015/02/04 职场文书
小平小道观后感
2015/06/09 职场文书
2016高考感言
2015/08/01 职场文书