async、await运用原理

小鱼儿 2022-11-26 06:57 170阅读 0赞

前面我们讲到了宏任务和微任务，我们先来回顾一下:

**JavaScript 异步编程**

> 由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。

**运行机制**

1.  在执行栈中执行一个宏任务。
2.  执行过程中遇到微任务，将微任务添加到微任务队列中。
3.  当前宏任务执行完毕，立即执行微任务队列中的任务。
4.  当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
5.  渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。

我们常常采用Promise来**将回调函数改成链式调用**，如果不转换，可能多个回调函数嵌套最终形成回调地狱，值得强调的是，即使采用了Promsie，但最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

const fs = require('fs')
    
    const readFileWithPromise = file => {
      return new Promise((resolve, reject) => {
        fs.readFile(file, (err, data) => {
          if (err) {
            reject(err)
          } else {
            resolve(data)
          }
        })
      })
    }
    
    readFileWithPromise('/etc/passwd')
      .then(data => {
        console.log(data.toString())
        return readFileWithPromise('/etc/profile')
      })
      .then(data => {
        console.log(data.toString())
      })
      .catch(err => {
        console.log(err)
      })

这个时候为了解决Promise的问题,ES7中async和await就被提出来了。

## async、await ##

先说一下async的用法，它作为一个关键字放在函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数意味着该函数的执行不会阻塞后面代码的运行。

const fs = require('fs')
    async function readFile() {
      try {    
        var f1 = await readFileWithPromise('/etc/passwd')
        console.log(f1.toString())
        var f2 = await readFileWithPromise('/etc/profile')
        console.log(f2.toString())
      } catch (err) {
        console.log(err)
      }
    }

async和await 函数写起来跟同步函数一样，条件是需要接收 Promise 或原始类型的值。异步编程的最终目标是转换成最容易理解的形式。

分析 async、await 实现原理之前，先介绍下知识：

## Generator ##

> Generator是ES6标准引入的新的数据类型。Generator可以理解为一个状态机，内部封装了很多状态，同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。  
> Generator的显著特点是可以多次返回，每次的返回值作为迭代器的一部分保存下来，可以被我们显式调用。

Generator 的基本用法：

function* foo(x) {
        yield x + 1;
        yield x + 2;
        return x + 3;
    }
    const result = foo(0) // foo {<suspended>}
    result.next();  // {value: 1, done: false}
    result.next();  // {value: 2, done: false}
    result.next();  // {value: 3, done: true}
    result.next();  //{value: undefined, done: true}

在这个例子里，我们可以看到，在执行foo函数后返回了一个 Generator函数的实例。它具有状态值suspended和closed，suspended代表暂停，closed则为结束。但是这个状态是无法捕获的，我们只能通过Generator函数的提供的方法获取当前的状态。 在执行next方法后，顺序执行了yield的返回值。返回值有value和done两个状态。value为返回值，可以是任意类型。done的状态为false和true，true即为执行完毕。在执行完毕后再次调用返回\{value: undefined, done: true\}

注意:在遇到return的时候，所有剩下的yield不再执行，直接返回\{ value: undefined, done: true \}

## Generator函数的方法 ##

Generator函数提供了3个方法：**next / return / throw**

1.  next方式是按步执行，每次返回一个值,同时也可以每次传入新的值作为计算
2.  return则直接跳过所有步骤，直接返回 \{value: undefined, done: true\}
3.  throw则根据函数中书写try catch返回catch中的内容，如果没有写try，则直接抛出异常。

## run函数 ##

有了前面关于 Generator 知识的复习，我们实现本文的核心函数；  
它接收一个 Generator 函数 fn 作为参数，它的功能就是模拟 async/await 机制运行该 fn 函数。

function run(fn) {
        const gen = fn()
        function _next(data){
            const { value, done } = gen.next(data)
            if(done) return value
    
            if(value.then){
                value.then(data => _next(data))
            }else{
                _next(value)
            }
        }
        _next()
    }

看了这个示例代码，应该就能明白 run() 的作用了，实际上通过这个函数，我们已经模拟实现了 async/await 机制；

我们做个不严谨的类比来说明：

*  function \* work() \{ \} 中间的 \* 号就相当于 async 关键字的作用；
 *  yield 关键字就相当于 await 关键字；

实际上 async/await 关键字也可以认为是 ES7 的语法糖，我们已经通过 run() 函数来模拟了其工作原理，所以这个时候它的基本原理也显而易见了。

## async&await实现原理 ##

*  async(异步)
    
     *  自动将常规函数转换成Promise,返回值也是一个Promise对象,Promise对象的状态值是resolved（成功的）
 *  await(等待)
    
     *  只能放在async函数里,await 强制后面的代码等待，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果 。
 *  使用async/await的时候，是无法捕获错误的，任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行，如果想捕获错误，需要使用es5中的try&catch，来进行错误的捕获 。
 *  async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

## 使用async&await实现异步请求 ##

想要Generator函数执行下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式或return语句。由此可见，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。