开开森森学前端之async原理

向右看齐 2022-01-20 07:11 172阅读 0赞

## 前言 ##

大家在工作中可能用了很多次`async`了，但可能由于时间精力原因没有研究过`async`的原理，今天我来给大家简单介绍下`async`的原理，讲的不好还望谅解！

## async语法 ##

**async函数会返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。**

async function test(){
        return 3;
    }
    test().then(data => console.log(data));   //3
    复制代码

`async`函数内部`return`语句返回的值，会成为`then`方法回调函数的参数。

我们现在举个读文件的例子，如果我们没有使用`async`,而使用了`promise`会写成什么样子呢?

function readFile(a){
        return new Promise(resolve => {
              setTimeout(() => { //模拟真实场景的延迟
                  resolve(a);
              },1000)
        })
    }
    readFile('a')
    .then(()=>{
       console.log('b')
    })
    .then(()=>{
        console.log('c')
    });     //promise[pending] b c
    复制代码

那么我们可以发现其实`Promise`并没有想象中的那么`优雅`，他依旧存在可读性差，多嵌套的问题。

那么我们如果使用了`async`之后呢？

async function test(){
      await readFile('a'); 
      console.log('b');
      console.log('c');
    }
    test();   //promise[pending] b c
    复制代码

它依旧会按顺序打出promise\[pending\] b c。因为`async`函数执行的时候，遇到`await`，就会等待`readFile`函数先完成，再执行后面的代码。

**async函数让我们在写代码时用同步的方式去解决异步的问题，且代码直观优雅!**

## 实现原理 ##

那么我们上面说了那么多`async`的好处，我想大家肯定都想之后`async`后面使用了什么`黑魔法`，为何会这么好用，那么接下来我带大家看一下！

那么其实呢，在了解`async`之前我们又要回到`生成器（generator）`

毕竟`async`只是`generator`的语法糖，跳过它直接学习`async`当然会错过很多。`async` 就等于`Generator+自动执行器`。

### Generator ###

var y = 1;
    function *foo(){
      y++;
      yield 'hello';
      console.log(y);
    }
    var iterator = foo();
    复制代码

这里并没有打出理想的`2`。生成器`*foo()`没有像普通函数一样运行，它只是创建了一个迭代器。

iterator.next();  // {value：'hello',done:false} 
    iterator.next();  // 2 {value：undefined,done:true}
    iterator.next();  // {value: undefined, done: true}
    复制代码

#### 代码流程解析 ####

第一次调用`next()`,会从函数开始位置执行到第一个暂停点(yield处)。它返回了一个对象，对象的`value`值就是当前`yield`的值。此时执行了一次`y++`;所以`y`的值为`2`。再次执行`next()`会运行到函数结束。这种方式可以让函数体的代码分段执行。而不再是一调用函数就自动帮你从到尾执行完，需要你手动`next()`来控制代码的进度。所以用它来处理异步的方式也比较明了了。`yield`暂停函数体代码，当异步操作完成后再使用`next()`恢复函数的代码。

#### 思考 ####

咱们如果使用生成器，想要控制函数的暂停和继续需要写额外的代码。所以如果有人能帮忙控制就最好不过了，那么是不是就需要一个**自动执行器**

## 自动执行器 ##

咱们试着来写一个自动执行器。可以看到，`iterator.next()`返回`{value:y,done:false}`。根据`done`的值是可以知道生成器内部代码是否执行完成。那根据他写个递归出来不就美滋滋了。试试。

function run(g){
      var res = g.next();//记住res.value是个promise对象
      if(!res.done){
        res.value.then(() => {   //promise解决了才调用next()继续执行生成器内部函数
          run(g);
        })  
      }
    }
    复制代码

### 测试自动执行器 ###

**当然啦。咱们这种写法肯定考虑不周，所以在实际项目中如果要使用生成器可以使用co模块！**

打出了a d b c。完美！第一次执行`foo()`.`next()`会打印出`a`。然后生成器内函数暂停。再打出`d`。定时器到了后再打出`b`和`c`。这个简单的自动执行器，是针对`yield`后面跟着`promise`对象的情况。实际使用可能不能这么写，它只是帮助你理解。实战可以选择`co`模块。 所以我们可以看出 `async` 等于就是`Generator+自动执行器`，现在应该很好理解了。

async function test(){
        await xxx
    };
    test();
    //等价于
    run((function *test(){
        yield xxx
    })());
    复制代码

## 总结 ##

> 今天我们解析了async函数的原理，其实也就是Generator+自动执行器，知其然知其所以然的感觉是开心的?

### 楼主的其他文章可以去楼主的专栏去看哦，感谢支持 ###