JS 非同期コードユニットテストの魔法 Promise

序文

この記事を書いた理由は、ユニット テストを書くときに、次のテストを実行したからです。

新しい Promise((resolve, deny) => deny(1)).then().catch(err => {
    コンソール.log(エラー)
})
非同期関数jestTest(){
    Promise.resolve().then() を待つ
    console.log('この時点で、catch が呼び出され、ログが出力されていると予想されます')
}
jestテスト()

イベント ループで catch が呼び出されるまで await を使用してテスト コードをブロックすることはできません。これにより、catch の実行が検出され、テストが合格します。

「魔法」という言葉が使われているのは、promsie のチェーン呼び出しには確かに多くのデフォルト ハンドラーと暗黙的な値の転送があるためです。

プロミスチェーン

時間を無駄にしないために、例を見てみましょう。

Promise.resolve('promise1')
.then(res => {
    console.log('promise1-1 then')
})
.then(res => {
    console.log('promise1-2 then')
})
.then(res => {
    console.log('promise1-3 then')
})
.then(res => {
    console.log('promise1-4 then')
})


Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
    新しいエラーをスローします('モックエラー1')
})
.then(res => {
    console.log('promise2-2 then')
    新しいエラーをスローします('モックエラー2')
})
.catch(エラー => {
    コンソール.log(エラー)
})

上記のコード出力シーケンスに対する回答が次のものと同じ場合は、この記事をスキップできます。

約束1-1

約束2-1

約束1-2

約束1-3

エラー: モックエラー 1

約束1-4

まず前提として、これら 2 つのプロミスの then 呼び出しが交差して積み重ねられていることが既にわかっている必要があります (出力の最初の 3 行からわかるように)。この部分についてよくわからない場合は、イベント ループに関する関連記事を参照してください。同時に、記事で指定されているバージョンでは、Chrome と Nodejs のイベント ループ メカニズムはすでに同じであることに注意してください。

MDN エラー

catch の元の（私が変更した）MDN の説明を見てみましょう。

基本的に、例外が発生すると Promise チェーンは停止し、代わりにチェーン内で catch ハンドラーを探します。

例外が発生するとチェーン呼び出しは停止し、チェーン内で catch ステートメントが見つかり、実行されます。

私の最初の誤解も同じでした。catch は最初にスローされた Error を直接キャッチする、つまり、Error は promise1-2 の後に出力され、promise2-2 が配置されている then はコール スタックに追加されないと誤解していました。

しかし、実際の出力結果を観察すると、そうではないことがわかります。これは、MDN の説明の文字通りの意味が間違っていることを示しています。チェーン呼び出しは停止せず、私たちが見ていない何かを実行しました。

連鎖デフォルト処理

この時点では、デフォルトの処理を知る必要があり、MDN の説明も直接引用します。

then が呼び出される Promise が、then にハンドラーがない状態 (履行または拒否) を採用する場合、then が呼び出された元の Promise の最終状態を単純に採用して、追加のハンドラーなしで新しい Promise が作成されます。

プロミスの then に対応する状態処理のコールバックがない場合、then はこのプロミスの状態を受け入れるプロミスを自動的に生成します。つまり、then は同じ状態参照を持つプロミスを返し、それを後続の呼び出しに渡します。

上記のコードの2番目のpromise部分は次のようになります。

Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
    新しいエラーをスローします('モックエラー1')
})
.then(res => {
    console.log('promise2-2 then')
    新しいエラーをスローします('モックエラー2')
// onRejected に注意してください
}, (エラー) => {
    Promise.reject(err) を返します。
})
.catch(エラー => {
    コンソール.log(エラー)
})

つまり、出力結果の promise1-2 と promise1-3 の間で promise2-2 の then が実行されるため、チェーン呼び出しは直接停止されず、promise2-2 の then が呼び出しスタックに追加されたままになります。キャッチは、直接キャッチされる最初の then によってスローされたエラーではなく、非表示の onRejected によって返される同じステータスの約束です。

略語

同様に、catch(onRejected) は then(undefined, onRejected) の省略形であることを知っておく必要があります。つまり、呼び出しチェーンの前の呼び出しでエラーがなくても、catch は呼び出しスタックを直接スキップするのではなく、呼び出しスタックに入ります。

Promise.resolve('promise1')
.then(res => {
    console.log('promise1-1 then')
})
.then(res => {
    console.log('promise1-2 then')
})
.then(res => {
    console.log('promise1-3 then')
})


Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
})
.catch(エラー => {
    コンソール.log(エラー)
})
.then(res => {
    console.log('実際はpromise2-3です')
})

非同期待機

最初に注意すべきことは、この記事で指定されている NodeJs および Chrome バージョンでは、f(await promise) は promise.then(f) と完全に同等であるということです。

もちろん、Promise について議論するときに、async await を無視することはできません。プロミスの状態が onResolve のときは両者の処理ロジックは同じですが、エラー処理の実行ロジックが異なります。async await でエラーが発生すると、後続の await の実行が本当に直接スキップされます。

const promiseReject = new Promise((resolve, deny) => {
    拒否(新しいエラー('error'))
})
const promiseResolve1 = 新しい Promise((resolve, 拒否) => {
    解決('正しい')
})
const promiseResolve2 = 新しい Promise((resolve, 拒否) => {
    解決('正しい')
})
const promiseResolve3 = 新しい Promise((resolve, 拒否) => {
    解決('正しい')
})
関数demo1() {
    約束拒否
    .then(() => {
        コンソールログ('1-1')
    })
    .catch(エラー => {
        コンソールログ('1-2')
    })
}

非同期関数demo2（）{
    試す {
        待つ約束拒否
        約束を待つ解決1
        promiseResolve2を待つ
        約束を待つResolve3
    } キャッチ（エラー）{
        コンソールログ('2-1')
    }
}
// 2-1
// 1-2

上記は、JS 非同期コード単体テストの魔法の約束の詳細です。JS 非同期コードの約束の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。