async/await 详解

开启生长之旅！这是我参与「日新计划 12 月更文挑战」的第1天，点击查看活动概况

前语

今日让咱们来聊聊JS对异步处理的终极操作：async
在ES7中提出了async这个函数 它是Generator函数的语法糖，用await关键字来表明异步 接下来咱们来一步步剖析：

传统promise.then解决的异步

比如这儿，它是先履行foo()函数，再来履行then中的回调函数bar()

new Promise (()=>{
    foo()
}).then(()=>{
    bar()
})

promise.then在解决异步方面是挺好用，then办法回来的一个新的promise实例，来完成链式调用，然后，将传给then的函数和新promise的resolve一起push到前一个promise的callbacks数组中，达到承上启下的效果

console.log(100);
setTimeout(() => {
  console.log(200);
})
Promise.resolve().then(() => {
  console.log(300);
})
console.log(400); 
打印成果：
100
400
300
200

可是总感觉它不是那么高雅，所以ES7便诞生了async函数，让一切高雅易懂

了解一下Generator函数

Generator函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数彻底不同。Generator函数将 JavaScript 异步编程带入了一个全新的阶段。

function* gen() {
    yield 1
    yield 2
    yield 3
    return 4
}
const g = gen()
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: 3, done: false }
console.log(g.next()); // { value: 4, done: true }

它里面给了一个封印，yield,也便是暂停，当函数运行到这儿时，暂停履行后边的操作，并将紧跟在yield后边的那个表达式的值，作为回来的目标的value属性值。 当return之后，也便是函数履行完毕，它的done值就会由false变成true。

next办法能够有参数

一句话说，next办法参数的效果，是为上一个yield语句赋值。由于yield永久回来undefined，这时分，如果有了next办法的参数，yield就被赋了值，比如下例，原本a变量的值是0，可是有了next的参数，a变量现在等于next的参数，也便是11。

手写Generator中心原理

重视它的中心也便是看看done如何变成true,看看下面的例子，用swith__case仿照一下

var context = {
    next: 0,
    prev: 0,
    done: false,
    // 新增代码
    stop: function stop() {
        this.done = true
    }
}
function gen$(context) {
    while (1) {
        switch (context.prev = context.next) {
            case 0:
                context.next = 2;
                return 'result1';
            case 2:
                context.next = 4;
                return 'result2';
            case 4:
                context.next = 6;
                return 'result3';
            case 6:
                // 新增代码
                context.stop();
                return undefined
        }
    }
}
let foo = function () {
    return {
        next: function () {
            value = gen$(context);
            done = context.done
            return {
                value,
                done
            }
        }
    }
}

第一次履行gen$(context),swtich判别的时分，是用prev来判别这一次应该履行哪个case，履行case时再改变next的值，next表明下次应该履行哪个case。第二次履行gen$(context)的时分，将next的值赋给prev。以及给context添加一个stop办法。用来改变自身的done为true。在履行$gen的时时分让context履行stop就好，这样履行到case为6的时分就会改变done的值了。
从中咱们能够看出，「Generator完成的中心在于上下文的保存，函数并没有真的被挂起，每一次yield，其实都履行了一遍传入的生成器函数，只是在这个进程中间用了一个context目标贮存上下文，使得每次履行生成器函数的时分，都能够从上一个履行成果开始履行，看起来就像函数被挂起了相同」

async/await

• 从上面咱们能够得知，Promise 的办法虽然解决了 callback hell，可是这种办法充满了 Promise的 then() 办法，如果处理流程复杂的话，整段代码将充满 then。语义化不明显，代码流程不能很好的表明履行流程。
• Generator 的办法解决了 Promise 的一些问题，流程更加直观、语义化。可是 Generator 的问题在于，函数的履行需求依托履行器，每次都需求经过 g.next() 的办法去履行。
  这两种办法都有一些小弊端，那么接下来的终极async函数完美的解决了上面两种办法的问题，一起它自带履行器，履行的时分无需手动加载

像写hooks高档函数相同写async函数

先来看看官方给的async/await

function foo(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * 2)
        }, 1000)
    })
}
async function asyncFn2() {
    const num1 = await foo(1)
    const num2 = await foo(num1)
    const num3 = await foo(num2)
    return num3
}
asyncFn2().then(res => console.log(res))

将前一个await回来的成果作为下一个的初始值，重复循环，直到return函数结束，这儿咱们能够看到打印出来的 asyncFn2()为Promise { <pending> },async函数是回来了一个promise目标，这样的promise.then完成的链式调用，当咱们的代码很长或者说需求嵌套的层数很多时，代码就会显得非常臃肿，那么怎么办呢，加上咱们的Generator函数。

function foo(num) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(num * 2)
      }, 1000)
    })
  }  
  // async  具有async功用的函数
  function generatorToAsync(generatorFn) {
    return function() {
      const gen = generatorFn.apply(this, arguments)  
      return new Promise((resolve, reject) => {  
        // const g = generatorFn()
        // const next1 = g.next()
        // next1.value.then(res1 =>  
        //   const next2 = g.next(res1)
        //   next2.value.then(res2 => {
        //     const next3 = g.next(res2)
        //     next3.value.then(res3 => {  
        //       resolve(g.next(res3).value) // { value: 8, done: true }
        //     })
        //   })
        // })
        function loop(key, arg) {
          let res = null
          res = gen[key](arg) // gen.next(8)
          const { value, done } = res
          if (done) {
            return resolve(value)
          } else {
            // Promise.resolve(value) 为了保证 value 中的promise状况现已改变成 成功状况
            Promise.resolve(value).then(val => loop('next', val))
          }
        }
        loop('next')
      })
    }
  }
  function* gen() {
    const num1 = yield foo(1)
    const num2 = yield foo(num1)
    const num3 = yield foo(num2)
    return num3
  }
  const asyncFn = generatorToAsync(gen)
  // console.log(asyncFn()); // Promise{}
  asyncFn().then(res => {
    console.log(res);
  })

界说一个高阶函数generatorToAsync，并将generatorFn函数当作参数传进去，然后回来一个具有async功用的函数，然后再下面界说一个loop函数，在其内部递归调用来知道咱们要调用.then的次数，在其内部给res一个初始null值，然后loop函数使用'next'作为参数，经过循环判别履行出来的成果状况是false仍是true,是false就继续递归，true就直接resolve出成果。从而完成async功用。

结语

界说高阶函数来完成具有async函数相同的功用，它不仅解决了代码冗余，一起，流程明晰，直观、语义明显。