JS 非同期スタック トレース: await が Promise よりも優れている理由

JS 非同期スタック トレース: await が Promise よりも優れている理由

概要

async/await と Promise の基本的な違いは、await fn() は現在の関数の実行を一時停止しますが、promise.then(fn) は fn 呼び出しをコールバック チェーンに追加した後、現在の関数の実行を継続することです。

const fn = () => console.log('hello')
定数a = 非同期() => {
  await fn() // fn の実行を一時停止する }
// a が呼び出されると、fn の実行が再開されます a() // "hello"

const promise = Promise.resolve()
// コールバックチェーンにfnを追加した後、fnの実行を継続します
promise.then(fn) // "こんにちは"

スタック トレースのコンテキストでは、この違いは非常に重要です。

Promise チェーン (desugared かどうかに関係なく) がいつでも未処理の例外をスローすると、JavaScript エンジンはエラー メッセージを表示し、(うまくいけば) 有用なスタック トレースをログに記録します。

開発者としては、通常の Promise を使用する場合でも、async await を使用する場合でも、これを期待するでしょう。

約束

非同期関数 b の呼び出しが解決されると、関数 c が呼び出されるシナリオを想像してください。

const b = () => Promise.resolve()
定数a = () => {
    b().then(() => c())
}

が呼び出されると、次のことが同期的に発生します。

  • b が呼び出され、将来のある時点で解決される Promise を返します。
  • .then コールバック (実際には c() を呼び出す) がコールバック チェーンに追加されます (V8 用語では、[...] が解決ハンドラーとして追加されます)。

その後、関数 a の本体のコード実行を終了します。 A は決して中断されず、B への非同期呼び出しが解決されるまでにコンテキストは消えてしまいます。

b (または c) が非同期に例外をスローした場合に何が起こるか想像してみてください。理想的には、B (または C) がそこから呼び出されたので、スタック トレースに A が含まれるはずですよね?を参照しなくなったので、これをどのように実行できるでしょうか?

これを機能させるには、JavaScript エンジンが上記の手順を超えて何かを実行する必要があります。つまり、機会があるたびにスタック トレースをキャプチャして保存する必要があります。

V8 では、スタック トレースは b によって返される Promise に添付されます。 Promise が満たされると、スタック トレースが渡され、c が必要に応じて使用できるようになります。

b()[a] -> b().then()[a] -> c[a?:a]

スタック トレースのキャプチャには時間がかかります (つまり、パフォーマンスが低下します)。これらのスタック トレースを保存するにはメモリが必要です。

非同期/待機

以下は、Promise の代わりに async/await を使用して記述した同じプログラムです。

const b = () => Promise.resolve()
定数a = 非同期() => {
  b() を待つ
  c()
}

await を使用すると、スタック トレースが await 呼び出しで収集されない場合でも、呼び出しチェーンを再開できます。

これは、A が中断され、B が解決されるのを待機しているために可能です。 b が例外をスローした場合、スタック トレースは要求に応じてこの方法で再構築できます。

c が例外をスローした場合、その時点ではまだ a のコンテキスト内にあるため、同期関数の場合と同じようにスタック トレースを構築できます。

次の推奨事項に従って、JavaScript エンジンがスタック トレースをより効率的に処理できるようにします。

  • Promise よりも async/await を優先します。
  • 不要な async/await 転送を回避するには、@babel/preset env を使用します。

以上がJS非同期スタックトレースの詳細と、なぜawaitがPromiseより優れているのかです。Javascriptの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • JS で async/await を使用して非同期呼び出しを実装する方法
  • NodeJsはasync/awaitを通じて非同期メソッドを処理します
  • async/await と promise (Node.js における非同期操作の問題)
  • JavaScript の非同期処理で待機時間を節約できますか?

<<:  WindowsとLinux間でファイルを転送する方法

>>:  Windows での MySQL のダウンロード、インストール、設定、使用に関するチュートリアル

推薦する

nginxのデフォルトポートを変更する方法の詳細な説明

まず設定ファイルがどこにあるか調べる nginx.confはどこにありますかこれらのディレクトリを調...

Layuiテーブル行のデータを動的に編集する

目次序文スタイル機能説明初期化コードイベントリスナーの追加リスナーツールバーモニターテーブル行ツール...

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

ローカルのMySQLをサーバーデータベースに移行する方法

Linux の scp コマンド (Windows では scp は使用できません) と、mysql...

docker に nacos をインストールしてデータベースを構成する詳細なチュートリアル

環境の準備 Docker環境 MySQL 5.7 (公式イメージはmysql8をサポートしていません...

Node8 における AsyncHooks 非同期ライフサイクル

Async Hooks は Node8 の新機能です。NodeJs の非同期リソースのライフサイクル...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...

VMware 仮想マシンの 3 つの接続方法の例の分析

NATこのようにして、仮想マシンのネットワーク カードはホストの VMnet8 に接続されます。この...

MySQL における UNION と UNION ALL の基本的な使い方

データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...

MySQL マルチバージョン同時実行制御メカニズム (MVCC) ソースコードの詳細な説明

目次1. はじめに2. MVCC (マルチバージョン同時実行制御メカニズム) 2.1 繰り返し読み取...

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...