JavaScript Promise.withResolvers() 関数

概要：このチュートリアルでは、JavaScriptのPromise.withResolvers()メソッドを使用して、resolve関数とreject関数を持つ新しいPromiseを作成する方法を学びます。

JavaScript Promise.withResolversメソッドの概要

新しいPromiseオブジェクトを作成するとき、通常、次のようにPromiseコンストラクタにresolve関数とreject関数を渡します。

const promise = new Promise((resolve, reject) =>{
   // ...
});Code language: JavaScript (javascript)

これにより、Promiseコンストラクタ内でのみresolve関数とreject関数を呼び出すことができます。

これらの関数をPromiseコンストラクタの外で呼び出すには、多くの場合、次のボイラープレートコードを記述する必要があります。

let resolve, reject;

const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
});

Math.random() > 0.5 ? resolve("Success") : reject("Error");Code language: JavaScript (javascript)

このコードでは

まず、Promiseのresolve関数とreject関数を保持する変数を宣言します。
次に、Promiseコンストラクタを使用して新しいPromiseオブジェクトを作成し、resolve関数とreject関数をこれらの変数に割り当てます。これにより、resolve関数とreject関数がPromiseコンストラクタの外で使用できるようになります。
3番目に、resolve関数とreject関数をPromiseコンストラクタの外で呼び出します。

Promise.withResolvers()関数を使用すると、次のようにコードを簡略化できます。

const { promise, resolve, reject} = Promise.withResolvers();

Math.random() > 0.5 ? resolve("Success") : reject("Error");Code language: JavaScript (javascript)

このコードでは、Promise.withResolvers()メソッドは、次のプロパティを含むオブジェクトを返します。

promise：新しいPromiseオブジェクト
resolve：Promiseを解決する関数。
reject：Promiseを拒否する関数。

Promise.withResolvers()は、ECMAScript 2024以降で使用可能になっていることに注意してください。

JavaScript Promise.withResolversメソッドの例

次の例は、Promise.withResolvers()メソッドを使用してユーザー入力を処理する方法を示しています。

ユーザーにリクエストを承認または拒否するように求めるダイアログがあるとします。ユーザーがダイアログを開くと、承認ボタンと拒否ボタンが表示されます。

Promiseを使用しない場合、次のように承認/拒否ボタンのクリックイベントを処理できます。

const btnReview = document.querySelector('#btnReview');

btnReject.addEventListener('click', () => {
  // handle rejection
  dialog.close();
});

btnApprove.addEventListener('click', () => {
  // handle approval 
  dialog.close();
});Code language: JavaScript (javascript)

このコードは正常に動作しますが、いくつかの欠点があります。

ユーザーインタラクションを処理するコードがイベントハンドラー全体に分散しています。
ダイアログを閉じるための重複したコード。

これらの問題を回避するために、Promise.withResolvers()メソッドを使用できます。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Promise.withResolvers() method</title>
        <script src="app.js" defer></script>
    </head>
    <body>
        <button id="btnReview">Review</button>
        <dialog>
            <p>Please approve/reject this request?</p>

            <button id="btnApprove">Approve</button>
            <button id="btnReject">Reject</button>
        </dialog>
        <p id="message" hidden></p>
    </body>
</html>Code language: HTML, XML (xml)

app.js

const btnReview = document.querySelector('#btnReview');
const btnApprove = document.querySelector('#btnApprove');
const btnReject = document.querySelector('#btnReject');
const dialog = document.querySelector('dialog');

const { promise, resolve, reject } = Promise.withResolvers();

btnReview.addEventListener('click', () => dialog.show());
btnApprove.addEventListener('click', resolve);
btnReject.addEventListener('click', reject);

promise
  .then(() => (message.innerHTML = 'You approved it.'))
  .catch(() => (message.innerHTML = 'You rejected it.'))
  .finally(() => {
    message.hidden = false;
    dialog.close();
    btnReview.remove();
  });Code language: JavaScript (javascript)

仕組み。

まず、btnReview、btnApprove、btnReject、およびdialogを含むページの要素を選択します。

const btnReview = document.querySelector('#btnReview');
const btnApprove = document.querySelector('#btnApprove');
const btnReject = document.querySelector('#btnReject');
const dialog = document.querySelector('dialog');Code language: JavaScript (javascript)

次に、resolve関数とreject関数を使用して新しいPromiseを作成します。

const { promise, resolve, reject } = Promise.withResolvers();Code language: JavaScript (javascript)

3番目に、btnReview、btnApprove、およびbtnRejectボタンのクリックイベントでイベントハンドラーを接続します。

btnReview.addEventListener('click', () => dialog.show());
btnApprove.addEventListener('click', resolve);
btnReject.addEventListener('click', reject);Code language: JavaScript (javascript)

最後に、then()、catch()、およびfinally()メソッドを使用してPromiseオブジェクトを呼び出します。

promise
  .then(() => (message.innerHTML = 'You approved it.'))
  .catch(() => (message.innerHTML = 'You rejected it.'))
  .finally(() => {
    message.hidden = false;
    dialog.close();
    btnReview.remove();
  });Code language: JavaScript (javascript)

Promise.withResolvers()メソッドを使用することで、2つの目標を達成できます。

Promise内でユーザーインタラクションを集中管理する。
Promiseのfinally()メソッドに移動することで重複コードを削除する。

まとめ

Promise.withResolvers()メソッドを使用して、resolve関数とreject関数を持つ新しいPromiseを作成します。

クイズ

このチュートリアルは役に立ちましたか？