コアポイント
ECMAScript 6（別名ECMAScript 2015またはES6）は、JavaScriptに多くの新機能をもたらし、大規模なアプリケーションに最適です。 1つの機能は、PromiseとGeneratorを使用した非同期プログラミングをより適切にサポートすることです。もう1つは、リモートリソースとの通信の基礎としてXmlhttpRequestを置き換えるように設計されたFetch APIの追加です。
Fetch APIメソッドは、Generatorと組み合わせて使用して複雑な非同期操作の基礎を形成できるES6 Promiseオブジェクトを返します。これは、一連の非同期操作（それぞれが以前の操作によって返された値に依存します）から、最新の更新を取得するためにサーバーに非同期コールを繰り返し発行する必要がある操作まで、何でもかまいません。
この記事では、ジェネレーターを使用してフェッチAPIを使用して非同期APIを構築する方法を学びます。 Fetch APIは現在、Chrome、Opera、Firefox、およびAndroidブラウザーによってサポートされています。サポートされていないブラウザの場合、GitHubからポリフィルを提供します。いつものように、この記事のコードはGitHubリポジトリに記載されており、記事の下部に最終的な手法のデモンストレーションがあります。
非同期操作にジェネレーターを使用
ヒント：ジェネレーターのコンテンツとその仕組みを確認する必要がある場合は、ECMAScript 2015：ジェネレーターとイテレーターを確認してください。
では、ジェネレーターを使用して非同期操作をどのように実行しますか？まあ、ジェネレーターの仕組みを分析すると、答えが見つかります。イテレーターを実装するジェネレーター関数には、次の構造があります。
function *myIterator(){
while(condition){
//计算要返回的下一个值
yield value;
}
}
yield上記の関数を
function *myIterator(){
while(condition){
//计算要返回的下一个值
yield value;
}
}キーワードを使用する唯一の理由は、次の反復（それ自体が少し非同期のように思える）まで関数の実行を一時停止することです。 yieldステートメントは任意の価値を返すことができるため、約束を返して、関数を複数の非同期呼び出しに実行させることもできます。 yield
fetch api でジェネレーターを使用します
ヒント：Fetch APIのレビューについては、チェックアウト：Fetch APIの紹介 前述のように、Fetch APIはxmlhttprequestを置き換えるように設計されています。この新しいAPIは、HTTP要求のさまざまな部分を制御し、サーバーの応答に基づいて解析または拒否された約束を返します。
長い世論調査
長いポーリングをシミュレートするために、5回の試行後に市のリアルタイムの天気情報に応答するサンプルコードにExpress Rest APIを含めました。これがREST API：
ですここで、このAPIを複数回呼び出し、各反復の約束を返すジェネレーター関数を書きましょう。クライアントでは、サーバーからデータを取得する繰り返しの数がわかりません。したがって、この方法には無限のループがあり、各反復はサーバーをpingし、各反復の約束を返します。以下は、この方法の実装です
function *myIterator(){
//计算值 1
yield value1;
//计算值 2
yield value2;
...
//计算值 n
yield valuen;
}この関数を継続的に呼び出して、約束者の後に値が存在するかどうかを確認するための関数が必要です。これは、ジェネレーターの次の反復を呼び出す再帰関数であり、発電機から返された値が見つかった場合にのみプロセスを停止します。次のコードスニペットは、この方法の実装とこの方法を呼び出すステートメントを示しています。
var polls=0;
app.get('/api/currentWeather', function(request, response){
console.log(polls, polls < 5);
if(polls < 5){
polls++;
response.send({});
} else {
response.send({temperature: 25});
}
});はジェネレーターオブジェクトを作成します。
メソッドは、function *pollForWeatherInfo(){
while(true){
yield fetch('/api/currentWeather',{
method: 'get'
}).then(function(d){
var json = d.json();
return json;
});
}
}メソッドによって返される約束が含まれています。この約束が解析されると、空のオブジェクト（runPolling変数が5未満の場合は返されます）、または必要な情報を含む別のオブジェクトが含まれます。 next
value次に、このオブジェクトのfetchプロパティを確認します（これは成功を示します）。存在しない場合は、ジェネレーターオブジェクトを次の関数呼び出しに渡します（ジェネレーター状態を失わないように）、またはコンソールにオブジェクトの値を印刷します。 polls
https://www.php.cn/link/494ad0d24e15c7da81c7ea265c7f4cb4 <結果：temperature
0 true 送信...空 1真 送信...空 2真 送信...空 3真 送信...空 4真 送信...空 5 false 送信...オブジェクト
およびオブジェクト自体がブラウザコンソールに印刷されました。
複数の依存関係の非同期呼び出しこれを実証するために、GithubのAPIを使用します。このAPIは、ユーザー、組織、およびリポジトリに関する基本的な情報にアクセスできます。このAPIを使用して、貢献者のリストを組織のランダムリポジトリに取得し、画面に取得したデータを表示します。
これを行うには、3つの異なるエンドポイントを呼び出す必要があります。以下は、実行する必要があるタスクです。組織の詳細を入手してください
組織が存在する場合は、組織のリポジトリを取得します
function *myIterator(){
while(condition){
//计算要返回的下一个值
yield value;
}
}
function *myIterator(){
//计算值 1
yield value1;
//计算值 2
yield value2;
...
//计算值 n
yield valuen;
}next結論
var polls=0;
app.get('/api/currentWeather', function(request, response){
console.log(polls, polls < 5);
if(polls < 5){
polls++;
response.send({});
} else {
response.send({temperature: 25});
}
});（以前の情報からコンテンツが高度に複製されているため、FAQパーツはここで省略されています）
以上がフェッチAPIおよびES6ジェネレーターを使用した非同期APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
