JavaScriptのPromiseの使い方

2020 1/25

2020.01.25 2020.01.25

はじめに

JavaScriptで非同期処理を行いたい時に使うPromiseオブジェクトについて学習したので、まとめようと思います。

非同期処理とは

非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。同期処理では、あるタスクが実行している間、他のタスクの処理は中断される方式である。 – 非同期処理を入れ、多重にコンテキストを用意することにより処理速度の向上を目指す設計が行われる。
I-26-2. 非同期処理と同期処理の実装パターンと特徴 | 日本OSS推進フォーラム
http://ossforum.jp/node/753

こちらを自分の言葉で料理に例えると
お味噌汁を作るときに
①出汁を作るために昆布を煮込みながら(加熱処理)
②具材の豆腐や大根を切る(具材の仕込み)

加熱処理を行いながら、他の仕込みをする。

抽象化すると、同時進行で処理を行うことを指すと言うことです。

Promiseとは

元々はJQueryのDeferredメソッド(ディファードメソッド)で実装されていた処理なのですが、JavaScriptで標準装備しましょうと言う流れになり、ES2015にてJQueryのDeferredメソッドの一部抜粋して実装されたメソッドらしいです。
※あっているか分からないです。誰か修正あったら教えてください。

記述方法

抽象的な書き方

var promiseObject = new Promise( (resolve, reject) => { 処理 } );

promiseObject.then(success, failure);

引数	関数の内容
resolve	処理の成功を通知するための関数
reject	処理の失敗を通知するための関数
success	成功コールバック関数(resolve関数によって呼び出し)
failure	失敗コールバック関数(reject関数によって呼び出し)

①Promiseオブジェクトを定義します。
②promiseオブジェクトを定義するときに引数に関数オブジェクトを定義。
③promiseにthenメソッドをチェーン。
④thenメソッドの引数にコールバック関数を渡す。

具体的な書き方

function sampleMethod(value){
    return new Promise((resolve, reject) => {
        setTimeout(
            ()=>{
                if (value){
                    // resolve関数の呼び出し
                    resolve(`入力値：${value}`);
                    } else {
                    // reject関数の呼び出し
                    reject('入力は空です')
                    }
            },
        500)
    });
}

sampleMethod("HIROTECH").then(
    // 第1引数の関数オブジェクトにresolve関数の引数を受け取って処理を実行。
    // (引数) =>{処理}としたときに、responseの中身は`入力値:${value}`と言うテンプレートリテラル
    response => { console.log(response) },
    // 第2引数の関数オブジェクトにresject関数の引数を受け取って処理を実行。
    // (引数) =>{処理}としたときに、errorの中身は'入力値は空です'と言う文字列
    error => { console.log(`エラー：${error}`) }
);

※今回setTimeoutメソッドを使っているのは関数の呼び出しをするためです！
非同期通信をしたいのであれば、setTimeoutの代わりにXMLHttpRequestオブジェクトを呼び出します。