JavaScriptのPromise

JavaScript の非同期処理の記述を完結にする Promise の使い方について紹介します。TypeScript で async/await を使う際にも重要な事項です。

筆者は C# や C++ がメインのため、ファイル読み込みなどは同期処理できないと何とも書きづらい性分の人間です。そういった人からすると、JavaScript の非同期的な書き方（コールバック地獄？）はつらいのです。ただ、この悩みは多くの方々が持っているようで、すでに解決策が提案されているようです。それが、ECMAScript2015(ES6) から導入された、Promise オブジェクトです。TypeScript 2.1 から、es5 をターゲットした場合でも async/await が使えるようになりました。ただ、この async/await は、Promise のシンタックスシュガーのため、そのあたりの構文を使いこなすためにも、Promise の使い方は理解しておく必要があります。

Promise が使える環境

さて、Promise は ES6 の仕様ということで、現在の対応状況について調べてみます。なお、この記事ではブラウザ上で動作させることを前提に進めていきます。

Can I use …によると、この記事を執筆時点で、IE11 以外のブラウザでは大体対応しているしているようです。IE11 でも Promise が使えるようなライブラリが多く存在しているようで、実質使っても問題ないといってよいでしょう。IE11 で使う場合は以下のライブラリが良いようです。

https://www.promisejs.org/

このページの中ごろに使い方が参照の仕方が書いてあります。以下のコードを、ページの処理ソースの前に読み込んでおけば問題ないようです。「7.0.4」はバージョン番号のため、更新されると思います。

<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>

TypeScript の async/await を使った場合、IE11 では上記のライブラリを読み込んでおかないとうまく動作してくれませんでした。（問題ないという記事も見かけたため、もう少し調べる必要がありそうです）

使い方

Promise を使うといろいろと便利なことができるようですが、ひとまず、非同期のコールバック処理を同期的に書くような書き方について調べていきたいと思います。

1 秒（1000 ミリ秒）ごとに 3 つのメッセージを出力するような以下の処理を題材としていきます。

console.log("Message1:" + new Date().toString());
window.setTimeout(
    function(){
        console.log("Message2:" + new Date().toString());
        window.setTimeout(
            function(){
                console.log("Message3:" + new Date().toString());
            }
            ,1000)
    },1000
    );

これを実行すると、以下のような出力が得られます。

Message1:Wed Mar 08 2017 12:12:53 GMT+0900 (東京 (標準時))
Message2:Wed Mar 08 2017 12:12:54 GMT+0900 (東京 (標準時))
Message3:Wed Mar 08 2017 12:12:55 GMT+0900 (東京 (標準時))

さて、先のコードを Promise に書き換えると以下のようになります。

function mes2() {
    return new Promise(function (resolve) {
        window.setTimeout(
            function () {
                console.log("Message2:" + new Date().toString());
                resolve();
            },
            1000);
    });
}

function mes3() {
    return new Promise(function (resolve) {
        window.setTimeout(
            function () {
                console.log("Message3:" + new Date().toString());
                resolve();
            },
            1000);
    });
}

// ここから実行
console.log("Message1:" + new Date().toString());
mes2().then(mes3);

なんだか記述量が増えてしまいましたが、入れ子はすこし解消された気がします。

Promise オブジェクトの動作

簡単な例として、コンソールに文字列を出力してみます。

var p = new Promise(function()
{
    console.log("Message1");
});

Promise の引数には、実行する関数を渡します。関数の引数には上記のスクリプトを実行すると、以下のように出力されるはずです。

Message1

Promise は、オブジェクト生成時に渡された関数を実行します。次に、以下のように、Promise オブジェクトの then に「Message2」と出力する関数を渡してみます。

var p = new Promise(function()
{
    console.log("Message1");
});

p.then(
    function()
    {
        console.log("Message2");
    }
);

これを実行すると、

Message1

としか、実行されません。

then 以降を実行できるようにするためには、Promise のコンストラクタに渡した関数内で適切な処理をする必要があります。Promise に渡す関数には、引数として、成功した際に呼び出す関数が渡されます。それを受け取り、呼び出す必要があります。Promise に最初に渡した関数を以下のように書き換え、その関数内で呼び出します。

var p = new Promise(function(resolve)
{
    console.log("Message1");
    resolve();
});

p.then(
    function()
    {
        console.log("Message2");
    }
);

引数の「resolve」とその呼び出し「resolve();」がポイントです。このスクリプトを実行すると以下のように表示されます。

Message1
Message2

ちなみに、p.then( ～ ); の文は、別に処理を待っているわけではありません。そのため、例えば以下のように書くと、

var p = new Promise(function(resolve)
{
    console.log("Message1");
    resolve();
});

p.then(
    function()
    {
        console.log("Message2");
    }
);
console.log("Message3");

以下のように出力されます。

Message1
Message3
Message2

このように、Promise オブジェクトが処理をブロックするわけではありません。1 → 2 → 3 のようにしたい場合は、then をつなげていきます。

var p = new Promise(function(resolve)
{
    console.log("Message1");
    resolve();
});

p.then(
    function()
    {
        console.log("Message2");
    }
).then(
    function()
    {
        console.log("Message3");
    }
);

then の振る舞いは、Promise オブジェクトを返した場合とそうでない場合で若干挙動が異なるのか、もう少し調べる必要はありますが、ひとまずこういった形で使えるようです。

then 以降の関数に引数を渡す

resolve 関数を呼び出す際に引数を渡すと、then に渡した関数の引数として受け取ることができます。

var p = new Promise(function(resolve)
{
    console.log("Message1");
    resolve("Message1のあとに呼び出し");
});

p.then(
    function(mes)
    {
        console.log("Message2:" + mes);
    }
);

このスクリプトを実行すると

Message1
Message2:Message1のあとに呼び出し

と出力されます。これらを利用すれば、コールバック地獄なしに、同期的に書けそうです。

Promise を使った書き方のまとめ ( テンプレート )

Promise の使い方は以下の通りになると思います。

非同期処理をする関数は、Promise オブジェクトを返す。
次の処理に移行する際には第一引数の関数を呼び出す。
非同期処理をする関数を、then でつないでいく。

コードにすると…

// Promiseオブジェクトを返す関数を作成
function asyncFunc1()
{
    return new Promise(function(resolve)
    {
        //コールバック関数
        var f = function()
        {
            //処理
            resolve();
        };
        // 終了時の関数登録と、非同期処理の開始
    });
}

function asyncFunc2()
{
    return new Promise(function(resolve)
    {
        //コールバック関数
        var f = function()
        {
            //処理
            resolve();
        };
        // 終了時の関数登録と、非同期処理の開始
    });
}

function asyncFunc3()
{
    return new Promise(function(resolve)
    {
        //コールバック関数
        var f = function()
        {
            //処理
            resolve();
        };
        // 終了時の関数登録と、非同期処理の開始
    });
}

// thenでつないでいって呼び出す。
asyncFunc1().
    then(asyncFunc2).
    then(asyncFunc3);

この場合、最後の asyncFunc3 は、Promise オブジェクトを返す必要はありませんが、一応です。

ちなみに、Promise では、処理に成功した場合と失敗した場合とで処理を変更することもできます。

JavaScriptのPromise

Promise が使える環境

使い方

Promise オブジェクトの動作

then 以降の関数に引数を渡す

Promise を使った書き方のまとめ ( テンプレート )

参考にしたサイト

目次

アウトライン