【JavaScript】Promiseの基本的な使い方

スポンサーリンク

JavaScript の Promise オブジェクトを使用すると、非同期処理を 順番に実行することができます。

Promise オブジェクトは、ECMAScript 6 から導入された機能で、 Promise オブジェクトを使うと、コールバック地獄を回避し、 簡潔にコーディングすることができます。

ここでは Promise オブジェクトの基本的な使い方を説明します。

非同期処理の動作を確認

まずは3つの関数を用意します。 どれも setTimeout() を使って非同期処理を行う関数です。

funcA() は3秒後に文字「A」をコンソールに表示、
funcB() は2秒後に文字「B」をコンソールに表示、
funcC() は1秒後に文字「C」をコンソールに表示、


function funcA(){
     setTimeout(function () {
         console.log("A");
     }, 3000);
}

function funcB(){
     setTimeout(function () {
         console.log("B");
     }, 2000);
}

function funcC(){
     setTimeout(function () {
         console.log("C");
     }, 1000);
}

上の3つの関数をfuncA()、funcB()、funcC()の順番で実行してみます。

funcA();
funcB();
funcC();

実行結果は次のようになります。


C
B
A

いずれの関数も非同期処理ですから、 1秒後に「C」が表示され、2秒後に「B」が表示され、3秒後に「A」が表示されます。

これが非同期処理の動作です。

Promise で非同期処理を順番に実行する

では次に Promise オブジェクトを使って、関数の実行順に表示されるようにします。 つまり「A」、「B」、「C」の順番で表示されるようにします。

先程の3つの関数を Promise を使って次のように書き換えます。 赤字の部分が新たに加わった部分です。


function funcA(){
    return new Promise(function (resolve, reject) {
         setTimeout(function () {
             console.log("A");
             resolve();
         }, 3000);
     });
}

function funcB(){
    return new Promise(function (resolve, reject) {
         setTimeout(function () {
             console.log("B");
             resolve();
         }, 2000);
     });
}

function funcC(){
    return new Promise(function (resolve, reject) {
         setTimeout(function () {
             console.log("C");
             resolve();
         }, 1000);
     });
}

上の関数を順番に実行するには次のように記述します。


funcA()
.then(funcB)
.then(funcC);

実行結果は次のようになります。


A
B
C

今回は、3秒後に「A」が表示され、その2秒後に「B」が表示され、その1秒後に「C」が表示されます。

このように Promise オブジェクトを使用することで、 非同期処理を順番に実行できます。非常に便利な機能です。

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト