資訊專欄INFORMATION COLUMN
摘要：一簡介函數(shù)是引入的新型函數(shù)，用于異步編程，跟對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度。二簡單示例和注意函數(shù)不能直接使用，是通過方法獲取的返回結(jié)果，而可以提前終止函數(shù)。
一、簡介
Generator函數(shù)是ES6引入的新型函數(shù)，用于異步編程，跟Promise對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度。
與普通函數(shù)的區(qū)別：
function關(guān)鍵字與函數(shù)名之間有一個(gè)星號；
函數(shù)體內(nèi)部使用yield語句，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）。
二、簡單示例 1、yield和returnfunction* 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和returnfunction* 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異步的時(shí)候，可以直接使用
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é)果：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101302.html
摘要：下的異步嘗試系列下的異步嘗試一初識生成器下的異步嘗試二初識協(xié)程下的異步嘗試三協(xié)程的版自動(dòng)執(zhí)行器下的異步嘗試四版的下的異步嘗試五版的的繼續(xù)完善生成器類獲取迭代器當(dāng)前值獲取迭代器當(dāng)前值返回當(dāng)前產(chǎn)生的鍵生成器從上一次處繼續(xù)執(zhí)行重置迭代器向生成器中 PHP下的異步嘗試系列 PHP下的異步嘗試一：初識生成器 PHP下的異步嘗試二：初識協(xié)程 PHP下的異步嘗試三：協(xié)程的PHP版thunkify自...
摘要：在某些不定長度的列表操作上，惰性列表會讓代碼和結(jié)構(gòu)更靈活。方法本身是立即執(zhí)行的，如果滿足條件，這里的方法會執(zhí)行兩次。結(jié)語和是帶給我們的非常強(qiáng)大的語言層面的能力，它本身的求值可以看作是惰性的。 初識 Lazy List 如果有了解過 Haskell 的朋友，對下面的這些表達(dá)一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...
摘要：后面可以跟對象，表示等待才會繼續(xù)下去執(zhí)行，如果被或拋出異常則會被外面的捕獲。沒有獲取狀態(tài)方法，標(biāo)準(zhǔn)沒有提供獲取當(dāng)前狀態(tài)或者的方法。只允許外部傳入成功或失敗后的回調(diào)。這種進(jìn)度通知的功能還沒有用過，暫不知道如何替代。 始終不是很懂fetch的作用，然后查了很多資料，看了一篇不錯(cuò)的文章，結(jié)合自己之前學(xué)習(xí)的Promise，然后做一篇文章，稍微記錄一下。傳統(tǒng) Ajax 已死，F(xiàn)etch 永生 雖...
摘要：如何在中使用動(dòng)畫前端掘金本文講一下中動(dòng)畫應(yīng)用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創(chuàng)建功能強(qiáng)大，動(dòng)態(tài)功能的。自發(fā)布以來，已經(jīng)廣泛應(yīng)用于開發(fā)中。 如何在 Angular 中使用動(dòng)畫 - 前端 - 掘金本文講一下Angular中動(dòng)畫應(yīng)用的部分。 首先，Angular本生不提供動(dòng)畫機(jī)制，需要在項(xiàng)目中加入Angular插件模塊ngAnimate才能完成Angular的動(dòng)畫機(jī)制...
閱讀 876·2021-10-25 09:45
閱讀 3305·2021-09-22 14:58
閱讀 3861·2021-08-31 09:43
閱讀 924·2019-08-30 15:55
閱讀 924·2019-08-29 13:51
閱讀 1237·2019-08-29 13:02
閱讀 3493·2019-08-29 12:52
閱讀 1968·2019-08-26 13:27
