JavaScript入門 非同期処理 Promise解説

let prom = new Promise( 非同期処理を扱う関数 );                  ※1
let thenProm = prom.then( 非同期処理の成功時に実行する関数 );        ※2
let catchProm = thenProm .catch( 非同期処理の失敗時に実行する関数);     ※3
let finallyProm = new catchProm .finally( 非同期処理後に必ず実行する関数); ※4

const instance = new Promise( asyncHandler );  //new Promiseのコールバック関数内で非同期処理を行う
function asyncHandler( resolve, reject ){      //resolve、rejectの2つの引数が渡されてくる
    setTimeout()( () => {
        if( 非同期処理は成功か？ ){              //非同期処理の結果に応じて、resolve、rejectを呼び分ける
            resolve( data );                   //非同期勝利が成功したとき、※2 thenの処理へ
        } else {
            reject( error );                   //非同期処理が失敗したとき、※3 catchの処理へ
        }
    });
}

let thenProm = prom.then( successHandler );
function successHandler( data ){
    非同期処理が成功した後に実行したい処理
}

let catchProm = prom.catch( errorHandler );
function errorHandler( error ){
    非同期処理が失敗した後に実行したい処理
}

let instance = new Promise(...).then( 成功したとき,失敗したとき )

let finallyProm = prom.finally( finalHandler );
function finalHandler() {
    非同期処理が完了した後に必ず行いたい処理
}

 let instance = new Promise( ( resolve,reject ) => {
    //１秒後に実行
    setTimeout( () => {
        //0~10のランダムな値を取得
        const rand = Math.floor( Math.random() * 11 );
        if( rand < 5 ){
            reject( rand );   //5未満のとき、エラーとする
        } else {
            resolve( rand );  //それ以外のとき、成功とする
        }
     }, 1000);
});
instance = instance.then( value => {
    console.log( `5以上の値[${ value }]が渡ってきました。` );
});
instance = instance.catch( errorValue => {
    console.log( `5未満の値[${ errorValue }]が渡ってきたためエラー表示` );
});
instance = instance.finally( () => {
    console.log( "処理を終了します。" );
});

■メソッドを1つずつ実行した場合
let instance = new Promise(・・・);
instance = instance.then( ・・・ );
instance = instance.catch( ・・・ );
instance = instance.finally( ・・・ );

■チェーンメソッドでつなげて記述した場合
let instance = new Promise( ・・・ ).then( ・・・ ).catch( ・・・ ).finally( ・・・・ );

■メソッドごとに改行してOK
let instance = new Promise( ・・・ )
    .then( ・・・ )
    .catch( ・・・ )
    .finally( ・・・ );

const Promiseインスタンス1 = new Promise( … );
const Promiseインスタンス2 = new Promise( … );
const Promiseインスタンス3 = new Promise( … );

Promiseインスタンス1
     .then( data1 => { return Promiseインスタンス2; } )
     .then( data2 => { return Promiseインスタンス2; } )
     .catch( error => { エラー発生時の処理 } )
     .finally( () => { 終了時の処理 } )

function promiseFactory( count ){                //※1
    return new Promise( ( resolve, reject ) => { 
        setTimeout( () => {
             count++;　　　　　　　　　　　　　　　//渡されてきたcountの値を1インクリメントする
             console.log( `$ { count }回目のコールです。時刻：[${ new Date().toTimeString() }]` );
             if( count === 3 ){                  //3回目のコールでエラー
                 reject( count );
             } else {
                 resolve( count );　　　　　　　　//次のthenのコールバック関数の引数にcountが渡る
             }
        }, 1000 );
    });
}

promiseFactory( 0 )
 .then( count => { return promiseFactory( count ); } )//※2
 .then( count => { return promiseFactory( count ); } )//※3
 .then( count => { return promiseFactory( count ); } )//これらのthenのコールバック関数は実行されない
 .then( count => { return promiseFactory( count ); } )
 .catch( errorCount => { 
    console.log( `エラーに飛びました。現在のカウントは ${ errorCount }です。` );
  } ).finally( () => {
    console.log( `処理を終了します。` );
  } );

function hello(){
    return "こんにちは。";
}
function fn1(){
    return hello();   //末尾()が付いているため、hello変数の実行結果が実行元に返される
}
function fn2(){
    return hello();    //末尾に()が付いてないため、hello関数自体が実行元に返される
                       //（hello関数は実行されていない）
}
console.log( fn1() );
>こんにちは。
console.log( fn2() );
>function hello() { ... };

let count = 0;
function promiseFactory() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            count++;
            console.log( `${count}回目のコールです。時刻：[${new Date().toTimeString()}]` );
            if(count === 3){    //3回目のコールでエラー
                reject(count);
            } else {
                resolve(count);
            }
        }, 1000 );
    });
}
const instance = promiseFactory();   //※1 この時点でpromiseFactory内のsetTimeoutが実行される
instance
 .then( () => { return instance; } )//setTimeoutの実行が再度行われるわけではないため、ログは出力されない
 .then( () => { return instance; } )//上行と同じ
 .then( () => { return instance; } )//上行と同じ
 .catch( errorCount => {
    console.log( `エラーに飛びました。現在のカウントは${ errorCount }です。` );
 } ).finally( () => {
    console.log( "処理を終了します。" );
 } );

let promResolve,　promReject;
const  prom = new Promise( (resolve, reject ) => {
    promResolve = resolve;      //※1 Resolveへの参照をpromResolveに保持
    promReject = reject;        //rejectへの参照をpromRejectに保持
});
console.log( prom );
> Promise {<pending>}           //resolve実行前はpendingの状態

promReject( "引数" );           //※2 resolveを実行
// promReject();                //※3

console.log( prom );
> Promise {<fulfilled>: "引数"} //fulfilledになる

Promise.all( iterablePromises )
    .then( ( resolvedArray ) => { … } )
    .catch( (error) => { … } );

Promise.all( [ fulfilled, fulfilled, fulfilled ] )  →thenメソッドを実行
Promise.all( [ fulfilled, fulfilled, rejected] )  →catchメソッドを実行

function wait( ms ) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log( `${ms}msの処理が完了しました。` );
            resolve( ms );
        }, ms );
    });
}
const wait400 = wait(400);
const wait500 = wait(500);
const wait600 = wait(600);

Promise.all( [ wait400, wait500, wait600] )
    .then( ( [ wait400, wait500, wait600] ) => {
        console.log( "すべてのPromiseが完了しました。" );
        console.log( wait500, wait600, wait400 );
    } );

Promise.race( [ pending, pending, fulfilled ] )  →thenメソッドを実行
Promise.race( [ pending, rejected, pending] )    →catchメソッドを実行

Promise.race( iterablePromises )
    .then( ( firstResolvedValue ) => { … } )
    .catch( ( error ) => { … } );

//resolve()を100ミリ秒後に実行するPromiseインスタンス
const myResolve = new Promise( resolve => {
    setTimeout( () => {
        resolve( "resolveが呼ばれました。" );
        console.log("myResolveの実行が終了しました。");
    }, 100);    
} );

//reject()を200ミリ秒後に実行するPromiseインスタンス
const myReject = new Promise( ( _, reject ) => {   //resolveを使わないため_としておく
    setTimeout( () => {
        reject( "rejectが呼ばれました。" );
        console.log("myRejectの実行が終了しました。");
    }, 100);
} );

Promise.race( [ myReject, myResolve ] )
    .then( value => {
        console.log( value );
    } ).catch( value => {
        console.log( value );
    });
>myResolveの実行が終了しました。    //※1
>resolveが呼ばれました。             //※2
>myRejectの実行が終了しました。        //※3

Promise.any( [ rejected, pending, fulfilled ] )  →thenメソッドを実行
Promise.any( [ rejected, rejected, rejected] )    →catchメソッドを実行

Promise.any( iterablePromises )
    .then( ( resolvedValue) => { … } )
    .catch( ( error ) => { … } );

//resolve()を200ミリ秒後に実行するPromiseインスタンス
const myResolve = new Promise( resolve => {
    setTimeout( () => {
        resolve( "resolveが呼ばれました。" );
        console.log("myResolveの実行が終了しました。");
    }, 200);    
} );

//reject()を100ミリ秒後に実行するPromiseインスタンス（rejectがmyResolveのresolveより前に呼び出される）
const myReject = new Promise( ( _, reject ) => {   //resolveを使わないため_としておく
    setTimeout( () => {
        reject( "rejectが呼ばれました。" );
        console.log("myRejectの実行が終了しました。");
    }, 100);
} );

Promise.any( [ myReject, myResolve ] )
    .then( value => {
        console.log( value );
    } ).catch( error => {
        console.log( error);
    });
>myResolveの実行が終了しました。    //※1
>resolveが呼ばれました。           //※2
>myRejectの実行が終了しました。    //※3

Promise.allSettled( [ fulfilled , rejected, fulfilled ] )  →thenメソッドを実行

Promise.allSettled( iterablePromises )
    .then( ( arry ) => { … } )

[
    { status: "fulfilled", value: "resolveの値" },  //fulfilledの場合
    { status: "fulfilled", reason: "rejectの値" }   //rejectの場合
]

//resolve()を200ミリ秒後に実行するPromiseインスタンス
const myResolve = new Promise( resolve => {
    setTimeout( () => {
        resolve( "resolveが呼ばれました。" );
        console.log("myResolveの実行が終了しました。");
    }, 200);    
} );

//reject()を100ミリ秒後に実行するPromiseインスタンス
const myReject = new Promise( ( _, reject ) => {         //resolveを使わないため_としておく
    setTimeout( () => {
        reject( "rejectが呼ばれました。" );
        console.log("myRejectの実行が終了しました。");
    }, 100);
} );

Promise.allSettled( [ myReject, myResolve ] )
    .then( arry => {
        for( const { status, value, reason} of arry ){   //分割代入で各プロパティの値を抽出
            console.log(`ステータス:[${ status }], 値:[${ value}], エラー:[${ reason}]`);
        }
    });
>myRejectの実行が終了しました。                                            //※1
>myResolveの実行が終了しました。                                           //※1
>ステータス:[rejected], 値:[undefined], エラー:[rejectが呼ばれました。]     //※2
>ステータス:[fulfilled], 値:[resolveが呼ばれました。], エラー:[undefined]   //※3

let val = 0;
Promise.resolve().then( () => {
    console.log(`valの値は[${ val }]です。`);  //非同期処理のためグローバルコンテキスト終了後に実行される
})

val = 1;
console.log(`グローバルコンテキスト終了`);
>グローバルコンテキスト終了
>valの値は[1]です。

Promise.reject( "エラーの理由" ).catch ( error => {
    console.log( error );
});

val = 1;
console.log(`グローバルコンテキスト終了`);
>グローバルコンテキスト終了
>エラーの理由

setTimeout( function task() { console.log( "Taskの実行" ) } );  //タスクキューに登録されたタスク
Promise.resolve().then( function job1() { console.log( "Job1の実行" ) } ); //ジョブはタスクキューの前に実行される
Promise.resolve().then( function job2() { console.log( "Job2の実行" ) } ); //ジョブキューに登録されたジョブがすべて処理されるまで、タスクキューのタスクは実行されない
console.log( "グローバルコンテキスト終了" );