先週学んだこと: async と await の概要

ようこそ!今週は async と await をレビューします.ここ数週間ブログエントリを書いていなかったので、始めましょう!

以下のプログラムを実行すると、コンソールに 1 番目、2 番目、3 番目に何が表示されますか?

あなたが言ったら...

Hello.
Goodbye!
Hello again!

あなたは正しい道を進んでいますが、間違っています.

では、なぜプログラムはコードsynchronouslyを1行ずつ実行しなかったのでしょうか?まあ、setTimeout()は非同期関数なので、タイマー関数は関数スタック内の他の関数の実行を一時停止しません.

非同期関数のより詳細な例については、エントリのコードを確認してみましょう...

fetch("http://startrek/planets", configObj)
  .then(function(response) {
    return response.json();
  })
  .then(function(object) {
    console.log(object);
  }); 

まず、fetch() が URL を介してリソースに HTTP リクエストを送信します.

fetch("http://startrek/planets")

次に、then() メソッドを使用して、返された promise を処理します.そしてjson()メソッドは、本文テキストをJSONとしてパースした結果で解決するpromiseを返します.

  .then(function(response) {
    return response.json();
  })

最後に、JSON データを操作できます.この場合、返されたデータをコンソールに表示したいだけです.

  .then(function(object) {
    console.log(object);
  }); 

このコードはまったく問題ありませんが、async/wait を使用してよりスリムにすることができます!

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let object = await response.json()
   console.log(object);
}

まず、async キーワードを使用して関数を宣言しました.これは、関数が応答で promise を返すことを意味します.

async getPlanets() {

}

次に、response 変数を作成し、それにフェッチ リクエストを保存しました.以下のコードについて、具体的に何かお気づきでしょうか. お待ちしております...

await means 関数が Promise を待つようにします.

async getPlanets() {
   let response = await fetch("http://startrek/planets");

}

次に、data 変数を作成し、response で json() を呼び出した結果を保存しました.

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let data = await request.json();
}

最後に、新しく返された JSON オブジェクトを使用して作業を行うことができます.この場合も、データをコンソールに表示したいだけです.

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let object = await response.json()
   console.log(object);
}

ご覧のとおり、async/await キーワードを利用することは、promise を補足する素晴らしい方法です.そうは言っても、async/await は必ずしも promises の代わりになるわけではなく、プログラマーが好んで呼び出すものであることに注意することが重要ですkeyword.

syntactic sugar

このブログ エントリはかわいくてシンプルにして、ここで終わります.すべてのコメントとフィードバックに感謝します.読んでくれてありがとう!