我们知道，javascript是单线程的，任务只能依次排开，，挨个执行，但是为了完成某些并行的需求，类似网络请求（网络请求有单独的线程去处理），就必须引入异步的概念，简单来理解就是：我想要吃饭，但是做好饭需要十分钟，这十分钟我不能待着，我要玩手机，等饭做好了，我再继续吃饭。
最传统普遍的异步解决方案就是写回调函数，
定时器
setTimeout(function(){
console.log("开始吃饭")
},600000)
网络请求
$post("www.chifan.com",function(res){
console.log("吃饭")
})
这会产生几个问题
回调地狱，难处理的异常，非常不优雅的代码。。
随着前端应用复杂性的不断提升，回调函数越来越不能满足我们的需求，几种解决方案被提了出来，
Promise,Generator,async/await
Promise
new Promise(function(resolve,reject){
if("做好饭"){
resolve("饭好了")
}
else{
reject("饭糊了")
}
})
.then(res=>{
console.log("吃饭")
})
.catch(err=>{
console.log("吃不成了")
})
Generator
function* chifan(){
yeild 'chifan'
}
new chifan().next()
async/await
async function(){
await zuofan();
return "吃饭了"
}
下面我们着重来介绍下promise，因为promise + async await 是业界异步解决方案最优雅的解法了，大约只有c# 和 nodejs 原生实现了此特性
我们先看下PromiseA+规范
- "promise"是一个函数，携带有满足规范的then方法
- "promise" 有三种状态，
pending，onFulfilled，onRejected，且从pending只能切换到onFulfilled或者onRejected一种状态，不能切换 - then方法返回的也是promise，且可以链式调用
看懂了规范我们先来演示一下在promise 和 async await下我们如何解决异步问题。
比如我们想要在两秒之后打印吃饭，吃完饭三秒后打印睡觉，传统回调写法
setTimeout(function(){
console.log('吃饭');
setTimeout(function(){
console.log('睡觉')
},3000)
},2000)
promise 写法
new Promise(function(res,rej){
setTimeout(function(){
console.log("吃饭")
res()
},2000)
})
.then(res=>{
return new Promise(function(res,rej){
setTimeout(function(){
console.log("睡觉")
res()
},3000)
})
})
.then(res=>{
},
reject=>{
console.log("异常")
})
.catch(err=>{
console.log(err)
})
async await 写法
(async function(){
await new Promise(function(res,rej){
setTimeout(function(){
console.log("吃饭")
res()
},2000)
})
await new Promise(function(res,rej){
setTimeout(function(){
console.log("睡觉")
res()
},3000)
})
})()
是不是感觉越写越像同步呢。
async 关键字用于匿名函数前面或者函数名字前面，有了这个关键字，函数内部可以使用await关键字，await关键字后面跟着一个promise对象，可以是函数返回一个promsie对象或者new 的一个promise对象，而每个await对应promise之后的代码，都会在当前await对应的promise resolve 之后才会执行，相当于将当前await 对应promise之后的代码包裹到了then 之中执行，，然后如果又碰到await。还是同理，一层层包裹，保证了多个await 对应promise的顺序执行
现在async中的代码可以顺序执行了，但是当前加了async 关键字的函数还是无法保证其他的函数在此函数执行完之后执行，因为浏览器的事件循环机制中，promise是放在微任务队列中执行的，，
因此，async 函数的返回值也是一个promise，无法保证当前async 函数后面的函数在此函数所有内容执行完之后执行，如果多个async 函数并行执行，我们还是需要将它当成promsie 进行处理。
也就是说 async 的返回值是一个promise
这时候如果我们在es5 提供的数组的遍历函数中使用async await 会产生一些难以预料的问题，如果你对async await promise 非常了解了，可以在 forEach，map， filter等中使用，类似这种
[1,2,3].map(async _=>{
await new Promise();
return _+1
})
// 执行其他代码
这个时候的函数执行时序会有些复杂，如果你理解了本文，可以预见到执行的结果，
如果你不是非常明白他的执行时序，建议遇到循环时，还是乖乖的写for循环吧。。。
网友评论