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 オブジェクトを使用することで、 非同期処理を順番に実行できます。非常に便利な機能です。