promiseとthenの使い方

はじめに

非同期通信でよく使うpromise、thenについて解説する。

説明

下記が参考コードになります。

function processWait() {
    let promise = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, 1000);
    });
    return promise;
}

let promise = processWait();

promise
.then(function() {
    console.log('朝だよ、起きて(1回目)');
    let promise = processWait();
    return promise;
})
.then(function() {
    console.log('朝だよ、起きて(2回目)');
    let promise = processWait();
    return promise;
})

processWait関数について

関数内では、new Promise(コールバック関数)で新しいPromiseオブジェクトを作っています。
コールバック関数の引数resolveは関数で、この関数がコールバック関数内で実行されると、Promiseは「解決済み」となります。今回でいうと、setTimeout関数の設定により、1000ミリ秒経過するとresolve()が実行され解決済みになります。「解決済み」となることで、1つ目のpromise.then(function() { 〜 })が実行されます。

function processWait() {
    // promiseオブジェクトを作成
    let promise = new Promise(function(resolve) {
        // 1000ミリ秒後に処理をする
        setTimeout(function() {
            resolve(); // promiseを解決するresolve関数
        }, 1000);
    });
    return promise;  // Promiseオブジェクトを返す
}

let promise = processWait();

Promiseの処理

processWait関数から返されたPromiseオブジェクトをpromise変数に格納します。

let promise = processWait();

then()はPromiseオブジェクトが持つメソッドで、Promiseオブジェクトのresolve()が実行されると、then()のコールバック関数が実行される。ゆえにまず1つ目のthenの処理が実行される。
またthen()実行後にpromiseオブジェクトをreturnすることで、.then().then()のように数珠つなぎで処理を1つずつ行うことができる。なので1つ目のthen()が実行されたあと、2つ目のthen()が実行される。

promise
.then(function() {
    console.log('朝だよ、起きて(1回目)');
    let promise = processWait();
    return promise; // Promiseオブジェクトを返す
})
.then(function() {
    console.log('朝だよ、起きて(2回目)');
    let promise = processWait();
    return promise;
})

終わり

Promiseとthenについて説明しました。
結論として、Promiseのコールバック関数内で、resolve()が実行されると、then()が実行されます。