JS で async と await を使用する方法

1. 非同期

async 、非同期コードが実行されるコードブロックを定義する非同期関数を作成します。

それを非同期関数に変換するにはどうすればよいでしょうか?これは関数の前に配置できるキーワードasyncで始まります。

非同期関数f(){
  1 を返します。
}
 
f().then(アラート); // 1
 
//結果は上記と同じ async function f() {
  Promise.resolve(1) を返します。
}
 
f().then(アラート); // 1
 
//矢印関数を使用することもできます let hello = async () => { return "1" };
hello().then((値) => console.log(値))
//戻り値は次のように簡略化することもできます hello().then(console.log)

非同期関数の特徴の 1 つは、関数の戻り値がpromiseであることが保証されることです。

関数宣言にasyncキーワードを追加すると、値を直接返すのではなく、 promiseを返すように指示されます。さらに、 awaitの使用をサポートすることで、同期関数の潜在的なオーバーヘッドを回避します。

2. 待つ:

await非同期関数内でのみ機能します。これを任意の非同期のawaitキーワードに配置すると、 JavaScriptエンジンはpromiseが完了して結果が返されるまで待機します。 promiseを待っている間に、実行を待っている他のコードが実行される機会があります。

Web API関数を含む、 Promiseを返す任意の関数を呼び出すときにawaitを使用できます。

非同期関数f(){
  promise = new Promise((resolve, deny) => { とする
    setTimeout(() => 解決("ブーム!"), 1000)
  });
 
  let result = await promise; // promise が解決するまで待機します。alert(result); // "Boom!"
}
 
f(); // 結果を取得して実行を続行します。したがって、上記のコードは 1 秒後に「Boom!」と表示します。

注: await は実際には、promise ステータスが満たされるまで関数の実行を一時停止し、promise の結果を使用して実行を続行します。 JavaScript エンジンは他のスクリプトの実行、イベントの処理など、他のタスクを同時に処理できるため、この動作では CPU リソースが消費されません。

3. 包括的なアプリケーション

async/await awaitが待機するため、あらゆる場所から.then()コードブロックを取り除くことができます。

非同期関数A() {
  応答を待機して fetch('c.jpg');
  myBlob = response.blob() を待機します。
 
  objectURL を URL.createObjectURL(myBlob) とします。
  image = document.createElement('img'); を作成します。
  image.src = オブジェクトURL;
  document.body.appendChild(画像);
}
 
あ()
.catch(e => {
  console.log('問題: ' + e.message);
});

コードをより少ない.then()ブロックでラップすると、同期コードに非常によく似たものになり、非常に直感的になります。このように使うととてもクールです！

JS async/await使い方についてはこれで終わりです。JS async/await の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: