Generator初識

beita 發(fā)布于2019-08-23 14:53 / 1292人閱讀

摘要：一簡介函數(shù)是引入的新型函數(shù)，用于異步編程，跟對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度。二簡單示例和注意函數(shù)不能直接使用，是通過方法獲取的返回結(jié)果，而可以提前終止函數(shù)。

一、簡介

Generator函數(shù)是ES6引入的新型函數(shù)，用于異步編程，跟Promise對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度。

與普通函數(shù)的區(qū)別：

function關(guān)鍵字與函數(shù)名之間有一個星號；

函數(shù)體內(nèi)部使用yield語句，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）。

二、簡單示例 1、yield和return

function* Foo() {
    yield "hello";
    yield "world";
    return "!";
}
var foo = Foo();

console.log(foo.next());
console.log(foo.next());
console.log(foo.next());

注意：generator函數(shù)不能直接使用，是通過next()方法獲取yield/return的返回結(jié)果，而return可以提前終止函數(shù)。foo.return("!")方法也可終止函數(shù)。

2、yield* 字符串方式

function* Foo() {
    yield* "hello";
}
var foo = Foo();

console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());

打印結(jié)果：

數(shù)組方式

function* Foo() {
    yield* ["a", "b", "c"];
}
var foo = Foo();

console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());

打印結(jié)果：

3、與for of配合使用 yield和return

function* Foo() {
    yield 1;
    yield 2;
    return 3;
}
var foo = Foo();

for(var v of foo) {
    console.log(v);
}

打印結(jié)果：

從上可以看出for of不執(zhí)行return值

yield*

function* Foo() {
    yield* "hello";
}
var foo = Foo();

for(var v of foo) {
    console.log(v);
}

打印結(jié)果：

4、throw方法

function* Foo() {
    try {
        yield;
    } catch(e) {
        console.log("內(nèi)部捕獲", e);
    }
}

var foo = Foo();
foo.next();

try {
    foo.throw("a");
    foo.throw("b");
} catch (e) {
    console.log("外部捕獲", e);
}

三、配合Promise使用

function promiseFn() {
    new Promise(function(resolve, reject) {
        setTimeout(function() {
            foo.next("G");
        }, 1000);
    });
}

function* Foo() {
    var a = yield promiseFn();
    var b = yield promiseFn();
    console.log(a, 111);
    console.log(b, 222);
}

var foo = Foo(); // foo是全局變量，掛在window上，存在變量提升，在執(zhí)行到promise異步的時候，可以直接使用
foo.next();

四、配合ajax使用

demo.php

"tom","age"=>rand()];
echo json_encode($a);

demo.html

function ajax() {
    $.ajax({
        type: "get",
        url: "demo.php",
        success: function(res) {
            foo.next(res);
        },
        error: function(error) {
            foo.next(error);
        }
    });
}

function* Foo() {
    var a = yield ajax();
    var b = yield ajax();
    console.log(a, 111);
    console.log(b, 222);
}

var foo = Foo();
foo.next();

打印結(jié)果：