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 のダウンロード、インストール、設定、使用に関するチュートリアル

推薦する

Dockerを使用して分散lnmpイメージを作成する

目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

Docker パッケージング ノード プロジェクトのプロセスの説明

バックエンド プログラマーとして、フロントエンドのものをいじらなければならないこともあります。そこで...

Docker 入門インストールチュートリアル (初心者版)

ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

jQueryはフォーム検証を実装する

jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。登録.ht...

CSS ペイント API: CSS のような描画ボード

1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...

MySQL パーティション フィールド列に別のインデックスを作成する必要がありますか?

序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...

リアルタイムクロックを実装するネイティブJS

ネイティブ JS で実装したリアルタイム クロック エフェクトを共有します。エフェクトは以下のとおり...

CSS でよく発生する問題の整理 (ロゴのハッキング/コンテナの固定/画像の垂直方向の中央揃え)

1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...

Centos8 に nginx1.9.1 をインストールする詳細な手順

1.17.9 本当はもっと美味しいNginx のダウンロード アドレス: https://nginx...

Linux周辺ファイルシステムのカスタマイズ方法

序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...