小编给大家分享一下async/await如何让异步操作同步执行，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
一.前言
我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了
二.异步操作会带来什么问题
异步操作可能会许多的问题,下面是常见的两种
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
看完了这篇文章，相信你对“async/await如何让异步操作同步执行”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。