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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS ループで async と await を正しく使用する方法
  • JS で async await をエレガントに使用する方法
  • JavaScript のよりエレガントなエラー処理方法 async await
  • JavaScript の async と await のシンプルで詳細な学習
  • JavaScript における async と await の使い方とメソッド
  • JavaScript PromiseとAsync/Awaitの詳細な説明

<<:  Docker ケース分析: MySQL データベース サービスの構築

>>: 

推薦する

MySQL 8.0 ウィンドウ関数の紹介と概要

序文MySQL 8.0 より前は、Oracle、SQL SERVER、PostgreSQL などの他...

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...

あなたが知らない Linux KDE アプリケーション 11 選

翻訳Kool Desktop Environment の略称。 Linux、Unix、FreeBSD...

MySQL に 1,000 万件のレコードを素早く挿入する方法

面接で「MySQL に 1,000 万件のレコードをすばやく挿入するにはどうすればよいか」という質問...

HTMLのインライン要素とブロックレベル要素とは何か、またそれらの違いは何ですか

以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素と...

Centos7 のインストールと Mysql5.7 の設定

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

Web 開発の面接と筆記試験に必須の知識(必読)

HTML のインライン要素とブロックレベル要素の違い:標準的なドキュメント フローでは、ブロック ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

VMware ワークステーション 12 に Ubuntu 14.04 (64 ビット) をインストール

1. インストール環境コンピュータモデル: Lenovo Y471a (i5) ノートパソコンシステ...

HTML+CSSで充電水滴融合特殊効果コードを実現

目次序文:成し遂げる:要約:まず効果を見てみましょう: 序文:このアイデアは、Bilibili のア...

CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

目次簡単な紹介1. 現在のgccバージョンを確認する2. gccインストールパッケージ(バージョン1...

JavaScript のクロージャの問題の詳細な説明

クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

WordPress実験を実装するための3つの仮想マシンのKVM展開の詳細説明

1. KVM の概要カーネルベースの仮想マシンの略称は、Linux 2.6.20 以降のすべての主要...

スクロールバーを非表示にしてコンテンツをスクロールする CSS サンプルコード

序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...