JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのPromise.finally()メソッドとは？使い方をサンプルコード付きで解説

Promise.finally()メソッドは、Promiseが履行（fulfilled）されたか拒否（rejected）されたかに関わらず、必ず指定したコールバック関数を呼び出します。この仕組みにより、Promiseの処理が成功しても失敗しても、最後に必ず実行したい共通処理（例：ローディング表示の解除、リソースの後片付けなど）を簡潔に記述できます。

基本構文

promise.finally(() => {
  // 成功・失敗に関わらず実行される処理
});

finally()に渡すコールバック関数には引数が渡されません。そのため、この中でPromiseが成功したのか失敗したのかを判定することはできません。結果による分岐が必要な場合は、then()やcatch()を使用します。

Promise.finally()の主な特徴

  • Promiseが履行（resolve）されても拒否（reject）されても、必ず1回だけ実行される
  • コールバック関数には引数が渡されない
  • コールバック内で値を返しても、その戻り値は無視される
  • then()やcatch()の後にチェーンして記述するのが一般的

コード例

以下は、JavaScriptでPromise.finally()を使用した具体的なサンプルコードです。ボタンをクリックするとAPIからデータを取得し、処理の成否にかかわらず完了メッセージを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Promise.finally in JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、Promiseの処理が完了したタイミングを確認できます
</h3>
<script>
    let btnEle = document.querySelector(".btn");
    let resEle = document.querySelector(".result");
    btnEle.addEventListener("click", () => {
        fetch("https://jsonplaceholder.typicode.com/users")
        .then((Response) => Response.json())
        .then((res) => res)
        .catch((err) => alert("error occured"))
        .finally(() => (resEle.innerHTML = "Promise is finished"));
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

JavaScriptのPromise.finally()メソッドとは？使い方をサンプルコード付きで解説

「CLICK HERE」ボタンをクリックして数秒待つと、APIへのデータ取得処理が完了し、成功・失敗に関わらず次のように「Promise is finished」というメッセージが表示されます。

JavaScriptのPromise.finally()メソッドとは？使い方をサンプルコード付きで解説

  1. 【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説

    finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー

  2. 【初心者向け】JavaScriptのfor...ofループの使い方を実例つきで解説

    JavaScriptのfor...ofループは、配列、文字列、配列風オブジェクト（Array-like objects）、NodeListなど、反復可能（イテラブル）なオブジェクトの要素を先頭から順番に1つずつ取り出して処理するための構文です。 インデックスの管理が不要なため、従来のforループやforEachメソッドと比べてコードが簡潔になり、可読性や保守性が向上するというメリットがあります。 for...ofループの基本構文 for (変数 of 反復可能オブジェクト) {   // 各要素に対して実行したい処理 } サンプルコード 次の例では、for...ofループを使って文