ES 6 Generatorの応用シーン

一、基礎知識
APIドキュメント
 
ES 6の誕生前に、非同期プログラミングの方法は、次の4つがあります.

コールバック関数

事件の傍受

リリース/購読

Promiseオブジェクト

Generator関数はJavaScriptを非同期的にプログラムして新しい段階に持ち込んだ.
二、応用シーン
1.例えば、抽選の一環で、現在のユーザーは5回も抽選できます.クリックした回数が1を減らします.
ES 5の方式を採用すれば、Generatorを使用しないと、countをグローバル変数に預け入れる必要がありますが、これは非常に安全ではなく、他の人が変数が何かを知っていれば、変数を変更できます.またグローバル変数を保存するとパフォーマンスにも影響します.

{
    let draw=function(count){
        //      ，          
        //      
        console.log(`  ${count} `)
    }
　　 //  Generator    
    let residue=function*(count){
        while(count>0){
            count--
            yield draw(count)
        }
    }
　　// Generator   ，      ，    next，    
    let star=residue(5)
    let btn=document.createElement('button')
    btn.id='start'
    btn.textContent='  '
    document.body.appendChild(btn)
    document.getElementById('start').addEventListener('click',function(){
        star.next()
    },false)
}

 2.ロングポーリング
場面:サービス先のあるデータの状態が定期的に変化します.フロントエンドはタイミングよくサービスエリアに取りに行きます.
このようなシーンには、2つの解決策があります.
1)ロングポーリング(タイマー、タイミングアクセスインターフェース)
2)websocket(ブラウザの互換性が悪い)

{
	let ajax=function* (){
		yield new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve({code:0})
			},200)
		})
	}

	let pull=function(){
		let generator=ajax()
		let step=generator.next()
		step.value.then(function(d){
			if(d.code!=0){
				setTimeout(function(){
					console.log('wait')
					pull()
				},1000)
			}else{
				console.log(d)
			}
		})
	}

	pull()
}

 出力結果は

{code: 0}

resolive({code:0})のcodeを1に変えて、ずっとポーリングして、結果を出力します.

wait
wait
wait
...

　　
 
転載先:https://www.cnblogs.com/knyel/p/7844787.html