JavaScriptのPromiseでthen・catch・finallyを使う方法を解説

Promiseが確定（settle）したとき、つまり履行（fulfilled）または拒否（rejected）のいずれかになったときに、finally()メソッドに指定されたコールバック関数が呼び出されます。また、finally()メソッド自体も新しいPromiseを返します。

この仕組みにより、Promiseが成功したか失敗したかにかかわらず、処理が完了した後に必ず実行したいコードを簡潔に記述できます。それでは、具体的な例を見ていきましょう。

例1：Promiseが成功する場合

new Promise(
   (resolve) => setTimeout(resolve("success"), 1000)
).then(val => console.log(val)).finally(() => console.log("Promise complete!"))

出力

success
Promise complete!

まずthen()でPromiseの結果を受け取り、その後にfinally()で完了メッセージが出力されているのが分かります。

次に、Promiseが失敗した場合にどうなるかを見てみましょう。

例2：Promiseが失敗する場合

// undefinedにはgetメソッドが存在しないため、エラーがスローされる
new Promise(() => undefined.get())
   .then(val => console.log(val))
   .catch(err => console.log("Failed!"))
   .finally(() => console.log("Promise complete!"))

出力

Failed! 
Promise complete!

この例では、エラーが発生したためcatch()が「Failed!」を出力し、その後finally()も実行されています。

ポイント：finally()は成功・失敗どちらでも必ず実行される

注目すべきは、成功したケースでも失敗したケースでも、どちらの場合もfinallyステートメントが実行されているという点です。リソースの解放やローディング表示の解除など、結果にかかわらず必ず行いたい後処理がある場合に、finally()は非常に便利なメソッドです。