asyncawait让异步操作同步执⾏的⽅法详解
⼀.前⾔
我们经常会遇到这样的⿇烦事，多个函数按顺序执⾏，返回结果却不是我们预期的顺序，原因⼀般是由于异步操作引起的，所以呢，我们需要⼀种解决⽅案来处理这种问题，从⽽使得异步操作按照同步的⽅式来执⾏，这样我们就可以控制异步操作输出结果的顺序了
⼆.异步操作会带来什么问题
异步操作可能会许多的问题，下⾯是常见的两种
1.函数执⾏的结果并不是按照顺序返回
function fn1(){
console.log(111)
setTimeout(function(){
console.log('wait me 3000')
},3000)
}
function fn2(){
console.log(222)
await和async使用方法
}
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对象，如果函数执⾏出现异常，就会调⽤ject()⽅法返回⼀个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有充分的理解
好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。