Generator与yield 语法糖 async和await

梦里梦外; 2021-09-02 10:45 261阅读 0赞

## Generator与yield ##

### Generator函数跟普通函数的写法区别： ###

一是，function关键字与函数名之间有一个星号；  
二是，函数体内部使用yield语句，定义不同的内部状态（yield在英语里的意思就是“产出”）。

简单的Generator函数如下：

// 通过定义Generator函数 来发送两次AJAX请求
    function * Gen() {
        // 发送第一次ajax
        $.ajax({
            url: "/ajax1",
            dataType: "json",
            success: function(data) {
                console.log("发送完毕ajax1");
                g.next(); // 当第一次ajax请求结束之后，就发送第二次
            }
        });
        yield;
        $.ajax({
            url: "/ajax2",
            dataType: "json",
            success: function(data) {
                console.log("发送完毕ajax2");
            }
        });
    }
    
    // 调用
    let g = Gen();
    g.next(); // 发送了第一次ajax请求

###  **从Generator函数内部向外部返回数据** ###

内部的传递方式：yield关键字后面可以跟内容。这些内容会被返回出去。

外部的接收方式：Gen.next() 会返回一个对象，对象中有value有done 其中value就是yield给返回出来的内容。

// 定义Generator函数
    function * g() {
        yield 'a';
        yield 'b';
        yield 'c';
        return 'ending';
    }
    // 调用
    var gen = g();
    gen.next(); // 返回Object {value: "a", done: false}

`gen.next()`返回一个非常非常简单的对象`{value: "a", done: false}`，'a'就是g函数执行到第一个yield语句之后得到的值，false表示g函数还没有执行完，只是在这暂停。

如果再写一行代码，还是`gen.next();`，这时候返回的就是`{value: "b", done: false}`，说明g函数运行到了第二个yield语句，返回的是该yield语句的返回值'b'。返回之后依然是暂停。

再写一行`gen.next();`返回`{value: "c", done: false}`，再写一行`gen.next();`，返回`{value: "ending", done: true}`，这样，整个g函数就运行完毕了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

**所以现在可以看出，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield语句（或return语句）为止。换言之，Generator函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。**

总之，每调用一次Generator函数，就返回一个迭代器对象，代表Generator函数的内部指针。以后，每次调用迭代器对象的next方法，就会返回一个有着value和done两个属性的对象。**value属性表示当前的内部状态的值**，**是yield语句后面那个表达式的值**；**done属性是一个布尔值，表示是否遍历结束**。

所以可以看出，**Generator 函数的特点**就是：

**1、分段执行，可以暂停  
2、可以控制阶段和每个阶段的返回值  
3、可以知道是否执行到结尾**

### yield语句 ###

迭代器对象的next方法的运行逻辑如下。

**（1）遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。**

**（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。**

**（3）如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。**

**（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。**

yield语句与return语句既有相似之处，也有区别。

相似之处在于，都能返回紧跟在语句后面的那个表达式的值。

区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield语句。正常函数只能返回一个值，因为只能执行一次return；Generator函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说Generator生成了一系列的值，这也就是它的名称的来历（在英语中，generator这个词是“生成器”的意思）。

**注意：yield语句只能用于`function*`的作用域，如果`function*`的内部还定义了其他的普通函数，则函数内部不允许使用yield语句。**

### for...of循环 ###

**for...of循环可以自动遍历Generator函数时生成的Iterator对象，且此时不再需要调用next方法。for...of循环的基本语法是：**

//其中foo()是迭代器对象，可以把它赋值给变量，然后遍历这个变量。
    function* foo() {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
      return 6;
    }
    
    let a = foo();
    
    for (let v of a) {
      console.log(v);
    }
    // 1 2 3 4 5

### Generator.prototype.throw() ###

Generator函数返回的迭代器对象，都有一个throw方法，可以在函数体外抛出错误，然后在Generator函数体内捕获。

既然我的文章是简单理解Generator函数，所以错误捕获直接跳过。

### Generator.prototype.return() ###

Generator函数返回的迭代器对象，还有一个return方法，可以返回给定的值，并且终结遍历Generator函数。

function* gen() {
      yield 1;
      yield 2;
      yield 3;
    }
    
    var g = gen();
    
    console.log(g.next());        // { value: 1, done: false }
    console.log(g.return('foo')); // { value: "foo", done: true }
    console.log(g.next());        // {value: undefined, done: true}

就是说，return的参数值覆盖本次yield语句的返回值，并且**提前终结遍历，即使后面还有yield语句也一律无视。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

### **Co函数的使用  结合promise与**Generator  优化代码 ###

通过co函数来使用： 条件，yield之后跟的一定要是Promise实例。

//引入封装的co函数
    
    // 定义任务 
    function taskOne() {
        return new Promise(function(resolve, reject) {
            $.ajax({
                url: "/ajax1",
                dataType: "json",
                success: function(data) {
                    resolve(123);
                }
            });
        });
    }
    
    function taskTwo() {
        return new Promise(function(resolve, reject) {
            $.ajax({
                url: "/ajax2",
                dataType: "json",
                success: function(data) {
                    resolve(data);
                }
            });
        });
    }
    
    
    // 定义Generator函数
    function * Gen() {
        let data = yield taskOne();
        console.log(data);
        let data1 = yield taskTwo();
        console.log(data1);
    }
    co(Gen);

再看这种写法：

每一个任务中，都与其它任务不干涉。 很干净

## async和await ##

**async定义一个异步函数 它其实是Generator的语法糖**

**await定义一个等待函数 它其实是yield的语法糖**

async定义一个异步函数 它其实是Generator的语法糖

定义语法： async function fun() \{\}

当定义了一个async函数之后，此时，函数的性质就变了。

普通函数的返回值，是由函数内的return关键字决定。

**    async函数的返回值，总是返回Promise实例。**

// 语法糖：指的是对高级复杂特性的一种简化使用方式
    async function taskOne() {
        console.log(1);
        await new Promise(function(resolve, reject) {
            setTimeout(function() {
                console.log("等待了3秒");
                resolve();
            }, 3000);
        });
        console.log(2);
        await new Promise(function(resolve, reject) {
            setTimeout(function() {
                console.log("等待了3秒");
                resolve();
            }, 3000);
        })
        console.log(3);
    }
    // 执行这个异步函数
    taskOne();

### **async** ###

async定义一个异步函数 它其实是Generator的语法糖

定义语法： async function fun() \{\}

当定义了一个async函数之后，此时，函数的性质就变了。

普通函数的返回值，是由函数内的return关键字决定。

**async函数的返回值，总是返回Promise实例。**

// 定义普通函数
    function fun() {
    
    }
    // 调用普通函数
    let f = fun();
    console.log(f); // undefined
    // 定义异步函数
    async function func() {
        
    }
    let f1 = func();
    console.log(f1); // Promise的实例

**它的状态其实是由异步函数内的执行情况来决定。**

**如果一切正常，该函数内的所有代码能够顺利执行完毕。则状态变为resolved**

**如果有异常，则状态变为rejected**

**它的结果是由异步函数的返回值决定**

### **await** ###

**await后面的内容**

**如果是Promise实例。则await左侧的变量接收到的值，就是Promise实例resolve()的传参。**

**如果不是Promise实例。则会使用Promise.resolve将它转为Promise实例。**

// 定义async
    async function fun() {
        let a = await 123;
    }

此时，没有任何异常。但是如果将async去掉

![20200916215259921.png][]

await表示“等待”。当执行到await的时候，会交出线程的控制权。

// 定义async函数
    async function fun() {
        console.log(123);
        await 123;
        console.log(321);
    }
    fun();
    console.log("哈哈哈哈");

![20200916215400103.png][]

**await后面跟的是Promise实例，Promise实例如果成功，则await左边的变量可以得到数据。得到的值就是resolve时的数据。**

// 验证
    async function fun() {
        let a = await new Promise(function(resolve, reject) {
            resolve("hello world"); 
        });
        console.log(a);
    }
    
    fun();

注：resolve执行时传递的是一个字符串。所以await左边的变量a得到的就是一个字符串。

规则： resolve接收什么参数，await左边的变量就得到什么。

### **错误处理  catch      try  catch** ###

如果代码中出现了错误，则会将异步函数返回值的Promise实例状态变为rejected并传递错误。

如果某一个await后面的Promise实例状态变为rejected。则也会将异步函数返回值的Promise实例状态变为rejected，并传递错误。

// 定义async函数
    async function fun() {
        throw new Error("123"); // 这一条会报错
        let a = await new Promise(function(resolve, reject) {
            setTimeout(function() {
                reject(123); // 这一条也会报错
            }, 3000);
        });
    
    }
    // 如果某一个await后面的Promise实例状态变为了rejected 
    // 则直接中止函数的执行并将异步函数Promise实例的状态变为rejected 
    let p = fun();
    p.catch(function(err) {
        console.log(err);
    });

![20200916215559775.png][]

还有另外一种处理方式：

// 定义async函数
    async function fun() {
        // throw new Error("123");
        try {
            let a = await new Promise(function(resolve, reject) {
                setTimeout(function() {
                    reject(123);
                }, 3000);
            });
        }catch(err) {
            console.log(err);
        }
        // 后续代码……
    }
    // 如果某一个await后面的Promise实例状态变为了rejected 
    // 则直接中止函数的执行并将异步函数Promise实例的状态变为rejected 
    let p = fun();
    p.catch(function(err) {
        console.log(err);
    });

因为这里是在异步函数内部处理了错误，所以异步函数中的后续代码部分会继续执行。但如果没有try……catch。则会影响到异步函数的返回值的Promise状态变化。会导致后续代码部分不会继续执行

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/16578f9a8d74423a8cc309ee0999ae68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/663f3eebe7d34cee9cc6d686a2aa6eaa.png
[20200916215259921.png]: /images/20210813/f7dcc177529b41b4afbd6718073636c5.png
[20200916215400103.png]: /images/20210813/dc7c0444803740acbfb5a28a47792915.png
[20200916215559775.png]: /images/20210813/7c524ed79ee54dca9642d7d631dd497b.png