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深入理解js闭包
Jul 03 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JavaScript实现放大镜效果代码示例
Apr 29 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
fgetcvs在linux的问题
2012/01/15 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python中PIL安装简单教程
2016/04/21 Python
使用python实现knn算法
2017/12/20 Python
python3个性签名设计实现代码
2018/06/19 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
温泉秘密:Onsen Secret
2020/07/06 全球购物
MySQL面试题
2014/01/12 面试题
大学毕业生简单自荐信
2013/11/05 职场文书
大学生秋游活动方案
2014/02/17 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Golang map映射的用法
2022/04/22 Golang