フェッチAPIおよびES6ジェネレーターを使用した非同期API

コアポイント

• ECMAScript 6（ES6）は、PromiseとGeneratorを通じて非同期プログラミングをより適切にサポートし、リモートリソースとの通信の基礎としてXmlhttpRequestを置き換えるように設計されたFetch APIを導入しました。
• Fetch APIメソッドは、発電機とともに使用できるES6 Promiseオブジェクトを返し、各操作が以前の操作によって返される値に依存する一連の操作など、複雑な非同期操作の基礎を形成します。
• ジェネレーターは、フェッチAPIで使用して、長いポーリングなどのタスクを実行できます。クライアントは、応答が得られるまでリクエストをサーバーに常に送信します。これは、データを含む前に応答を作成することによって行われます。
• Fetch APIおよびES6ジェネレーターを使用して、複数の依存関係の非同期呼び出しを実装することもできます。この後の各操作は、前の操作によって返される値に依存します。これは、それらを発電機関数に入れて、必要に応じて実行することで実行できます。

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;
  }
}

上記の2つのケースでは、関数が同じように動作します。

キーワードを使用する唯一の理由は、次の反復（それ自体が少し非同期のように思える）まで関数の実行を一時停止することです。 yieldステートメントは任意の価値を返すことができるため、約束を返して、関数を複数の非同期呼び出しに実行させることもできます。 yield

fetch api でジェネレーターを使用します

ヒント：Fetch APIのレビューについては、チェックアウト：Fetch API

の紹介 前述のように、Fetch APIはxmlhttprequestを置き換えるように設計されています。この新しいAPIは、HTTP要求のさまざまな部分を制御し、サーバーの応答に基づいて解析または拒否された約束を返します。

長い世論調査

フェッチAPIとジェネレーターを一緒に使用できるユースケースの1つは、長いポーリングです。長いポーリングは、応答が得られるまでクライアントがサーバーに常にリクエストを送信する手法です。この場合、ジェネレーターを使用して、応答にデータが含まれるまで応答を継続的に生成できます。

長いポーリングをシミュレートするために、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つの異なるエンドポイントを呼び出す必要があります。以下は、実行する必要があるタスクです。

組織の詳細を入手してください

組織が存在する場合は、組織のリポジトリを取得します

• 組織のリポジトリの1つに貢献者を取得します（ランダムに選択）
フェッチAPIの周りにラッパー関数を作成して、ヘッダーを作成してリクエストオブジェクトを作成するためのコードの繰り返しの書き込みを避けましょう。

次の関数は上記の関数を使用し、各コールで約束を生成します：

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

次に、上記の関数を呼び出してジェネレーターを取得し、サーバーから取得した値をUIに入力するためにロジックの一部を記述しましょう。発電機の各呼び出しは、約束を返すため、これらの約束をリンクする必要があります。以下は、上記の関数を使用して返されるジェネレーターのコードフレームワークです。

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});
  }
});

この記事では、ジェネレーターを使用してフェッチAPIを使用して非同期APIを構築する方法を示しました。 ECMAScript 6は、言語に多くの新機能をもたらし、それらを組み合わせて力を活用する創造的な方法を見つけることで、多くの場合、素晴らしい結果につながります。しかし、あなたはどう思いますか？これは、すぐにアプリで使用を開始できるテクノロジーですか？コメントであなたの考えを聞きたいです。

（以前の情報からコンテンツが高度に複製されているため、FAQパーツはここで省略されています）

以上がフェッチAPIおよびES6ジェネレーターを使用した非同期APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。