javascript异步解决方案简介及数组遍历中async用法

我们知道，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循环吧。。。