摘要:使用同步化異步函數的幾個步驟將異步代碼的每一步都封裝成一個普通的函數定義一個生成器函數把流程寫進去定義一個變量賦值為遍歷器對象生成器變量名
基本概念
Generator 是ES6的一種異步編程結局方案。
狀態機 (封裝了多個內部狀態 ) 遍歷器對象生成
function* helloWorldGenderator() { yield "hello"; yield "world"; return "ending"; } var hw=helloWorldGenderator();
有兩個狀態 hw是指向一個內部狀態對的指針對象
function* helloWorldGenderator() { yield "hello"; yield "world"; return "ending"; } var hw=helloWorldGenderator(); console.log(hw.next()) //{done:false value:"hello"} console.log(hw.next()) //{done:false value:"hello"} console.log(hw.next()) //{done:true value:"hello"}
生成的遍歷器之間彼此不受影響
function* g() { var o=1; yield o++; yield o++; yield o++; } var gen=g(); console.log(gen.next()) //1 var xx=g(); console.log(xx.next()) //1 console.log(gen.next()) //2 console.log(xx.next()) //2
當調用next() 方法的時候 從上一個yield開始執行 遇到yield就會暫停執行 并返回yield后邊的值
使用 for of方法自動可以遍歷 遍歷器對象function* g() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } let a=g(); for(let i of a){ console.log(i) //1 2 3 4 5 }
實現菲薄齊納函數
function* ff() { let [prev,curr]=[0,1]; for(;;){ [prev,curr]=[curr,prev+curr]; console.log("---------") yield curr; } } for(let n of ff()){ if(n>100) break console.log(n) }狀態機
ES5版本的狀態機
var ticking=true; var clock=function () { if(ticking){ console.log("Tick"); }else{ console.log("Tock"); } ticking=!ticking } setInterval(clock,1000)
ES6版本的狀態機
function* Clock () { while (true){ console.log("111") yield ; console.log("222") yield ; } } var cc=Clock(); setInterval(function () { cc.next() },1000)使用Generator函數實現異步操作
使用例子:在服務器端有3個文件 a.html b.html c.html 現在前端需要讀到這三個文件的內容才可以繼續執行操作。
$.get("a.json",function (data) { console.log(data) $.get("b.json",function (data) { console .log(data) $.get("c.json",function (data) { console.log(data) //執行前端代碼 }) }) })
異步回調函數的地域
function request(url) { $.get(url,function (response) { it.next(response); }) } function* ajaxs () { var i=0; console.log(++i,yield request("a.json")) console.log(++i,yield request("b.json")) console.log(++i,yield request("c.json")) } var it=ajaxs(); it.next();
使用Generator實現了異步請求三個文件 。
使用Generator同步化異步函數的幾個步驟
1、將異步代碼的每一步都封裝成一個普通的函數
2、定義一個生成器函數 把流程寫進去
3、定義一個變量 賦值為遍歷器對象生成器
4、變量名.next()
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85189.html
摘要:調用函數后和普通函數不同的是,該函數并不立即執行,也不返回函數執行結果,而是返回一個指向內部狀態的對象,也可以看作是一個遍歷器對象。第一個只是用來啟動函數內部的遍歷器,傳參也沒有多大意義。 之前斷斷續續接觸到了一些ES6的知識,異步編程方面聽得比較多的就是Promise,直到最近比較系統地學習了ES6的新特性才發現Generator這個神奇的存在,它可以實現一些前所未有的事情,讓我頓時...
摘要:返回的遍歷器對象可以依次遍歷函數內部的每一個狀態。示例內部捕獲外部捕獲內部捕獲外部捕獲上面代碼遍歷器對象連續拋出兩個錯誤,第一個被函數體內的捕獲。上面代碼中,首先執行函數,獲取遍歷器對象,然后使用方法第二行,執行異步任務的第一階段。 參考 來源《ecmascript6 入門》generator部分 認識generator函數 形式上,generator函數有兩個特點:一是functio...
摘要:函數返回的遍歷器對象,還有一個方法,可以返回給定的值,并且終結遍歷函數。這被稱為表達式個人理解主要用作遍歷具有遍歷器接口的對象或函數。完整形式函數的函數總是返回一個遍歷器,規定這個遍歷器是函數的實例,也繼承了函數的對象上的方法。 語法上 首先可以把它理解成,Generator 函數是一個狀態機,封裝了多個內部狀態。執行 Generator 函數會返回一個遍歷器對象,也就是說,Gener...
摘要:同時,迭代器有一個方法來向函數中暫停處拋出一個錯誤,該錯誤依然可以通過函數內部的模塊進行捕獲處理。 本文翻譯自:Diving Deeper With ES6 Generators 由于個人能力有限,翻譯中難免有紕漏和錯誤,望不吝指正issue ES6 Generators:完整系列 The Basics Of ES6 Generators Diving Deeper With E...
摘要:返回的遍歷器對象,可以依次遍歷函數內部的每一個狀態。方法調用遍歷器對象的方法,使得指針移向下一個狀態。運行結果就是使用一個遍歷器,遍歷了多個函數,有遞歸的效果。 1、Generator簡介 基本概念 Generator函數有多種理解角度。從語法上,首先可以把它理解成,Generator函數是一個狀態機,封裝了多個內部狀態。 執行Generator函數會返回一個遍歷器對象,也就是說,Ge...
摘要:換句話說,我們很好的對代碼的功能關注點進行了分離通過將使用消費值得地方函數中的邏輯和通過異步流程來獲取值迭代器的方法進行了有效的分離。但是現在我們通過來管理代碼的異步流程部分,我們解決了回調函數所帶來的反轉控制等問題。 本文翻譯自 Going Async With ES6 Generators 由于個人能力知識有限,翻譯過程中難免有紕漏和錯誤,還望指正Issue ES6 Gener...
閱讀 2669·2021-11-25 09:43
閱讀 2475·2021-09-22 15:29
閱讀 989·2021-09-22 15:17
閱讀 3631·2021-09-03 10:36
閱讀 2228·2019-08-30 13:54
閱讀 1747·2019-08-30 11:23
閱讀 1167·2019-08-29 16:58
閱讀 1294·2019-08-29 16:14