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の他の関連記事にも注目してください。