【JSリファレンス】Promise.withResolvers()

更新日:2024/06/14

初出:ECMAScript2024


Promise.withResolvers()は、Promiseコンストラクターのメソッドです。

新規Promiseオブジェクト及び、Promiseオブジェクトfulfilled(履行)または rejected(拒否)に状態遷移させる二つのメソッドを取得します。

 

■構文

Promise.withResolvers ( )
  1. なし
次の3つのプロパティを持つオブジェクト

Promise: 新規Promiseオブジェクト
resolve: fulfilledに遷移させるメソッド
resolve: rejectedに遷移させるメソッド

 

■使用例

new Promise()のコールバック関数を使用しないでコードを作成する

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

promise.then( console.log );

const time = 3000;

setTimeout( 
  ()=>resolve( `${time}ミリ秒待機しました`)
  ,time );

// 結果: 3000ミリ秒待機しました

▶複数のボタンクリック処理をまとめる

document.addEventListener("DOMContentLoaded",()=>{
    
    document.getElementById("btn1")
      .addEventListener("click",()=>{
        resolve("btn1");
      });
    document.getElementById("btn2")
      .addEventListener("click",()=>{
        resolve("btn2");
      });

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

    let promise,resolve,reject;
    resetPromise( );

    (async ()=>{
      while(true){
        const btn = await promise;
        switch(btn){
          case "btn1": 
            console.log("click btn1");break;
          case "btn2": 
            console.log("click btn2");break;
        }
        resetPromise();
      }
    })();
});

上記のコードはイベントリスナーでPromiseを解決させ、async関数内でクリック後の処理を行っています。
解決の際に使用する関数は、Promise.withResolvers( )で取得したものです。
Promiseは一度解決すると元に戻すことができないので再生成していますが、同じ変数を使用することでそのままイベントリスナーを動作させることができます。

Promise.withResolvers()は、上記のようにイベントリスナーなどのコールバック関数内でPromiseを解決させる動作を繰り返すとき、メリットがあります。

更新日:2024/06/14

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://jsref.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。