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

更新日：2024/06/14

Promiseコンストラクターは、Promiseオブジェクトを生成します。

Promiseオブジェクトを使用することで、煩雑になりやすい遅延 (場合によっては非同期) 処理の流れを構造化でき、わかりやすいプログラムコードを構築できます。

 

■構文


new Promise ( executor )
  1. executor: 二つの引数を受け取る関数
生成されたPromiseオブジェクト

Promiseコンストラクターはexecutor関数を実行後に、生成したPromiseオブジェクトを返します。

 

■executor関数の構文


executor( resolve , reject ){
}
  1. resolve: 解決(resolve)関数
    処理完了時に呼び出し、状態を履行 (fulfilled)に変更する

    resolve()関数を呼び出すと、最初のthen()メソッドのonFulfilledハンドラーまたはfinally()のonFinallyハンドラーが実行される。

  2. reject: 拒否(reject)関数
    処理失敗時に呼び出し、状態を拒否 (rejected)に変更する

    reject()関数を呼び出すと、最初のthen()メソッドまたはcatch()メソッドのonRejectedハンドラーまたはfinally()のonFinallyハンドラーが実行される。

なし

 

■仕組みについて

Promiseオブジェクトは、pending（保留）、fulfilled（履行）、rejected（拒否）の３つの状態のいずれかを持っています。

executor関数で、resolve()またはreject()を呼び出さない場合は、pending　です。

const promise = new Promise( ()=>{} );
console.log( promise );
 // 結果： Promise { <state>: "pending" }

結果の <state> は内部スロットのため、プログラムコード上で確認できません。
ここで表示されるのは、コンソール出力の際に実行環境が独自の判断で表示したものです。
実行環境が異なれば、表示内容も異なる可能性があります。

遅延により、resolve()またはreject()を呼び出されていない場合でも同様です。

const promise = new Promise( (resolve)=>{
    setTimeout(()=>resolve(),5000);
} );
console.log( promise );
 // 結果： Promise { <state>: "pending" }

resolve()を呼び出すと、状態が fulfilled に移行します。

const promise = new Promise( (resolve)=>{
        resolve(100);
} );
console.log( promise );
 // Promise { <state>: "fulfilled", <value>: 100 }

遅延している場合でも同様です。

const promise = new Promise( (resolve,reject)=>{
    setTimeout(()=>{
        console.log( 2 , "1秒経過" );
        resolve(100);
        console.log( 3 , promise );
    },1000);
} );
console.log( 1 , promise );
 // 結果：
 // 1 Promise { <state>: "pending" }
 // 2 1秒経過
 // 3 Promise { <state>: "fulfilled", <value>: 100 }

reject()を呼び出すと、状態が rejected に移行します。

const promise = new Promise( (resolve,reject)=>{
        reject(100);
} );
console.log( promise );
 // Promise { <state>: "rejected", <value>: 100 }

状態が fulfilled または rejected に移動した時点で、onFulfilled、onRejected、onFinallyのいずれかのハンドラーが呼び出されます。

実際には、ハンドラーを呼び出すPromiseジョブがイベントキューに登録されます。
そして、現在実行しているコードが終了してイベントループに戻った後、Promiseジョブが実行されます。

各イベントハンドラーは、then()、catch()、finally()で登録します。

 

■使用例

const promiseObj = new Promise( (resolve,reject)=>{
    const waitTime = 1000;
    setTimeout( 
        ()=>resolve(waitTime) 
        , waitTime 
    );
}).then((waitTime)=>{
    console.log( `${waitTime}ミリ秒経過しました` );
} );
// 結果: 1000ミリ秒経過しました

更新日：2024/06/14

書いた人（管理人）：けーちゃん

スポンサーリンク

記事の内容について

null

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

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

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

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

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

 

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