JavaScript Promiseオブジェクトのサンプル

JavaScriptのPromiseオブジェクトのサンプルです。

確認環境
・Windows 10
・Google Chrome

目次

Promiseオブジェクト

Promiseオブジェクトを使用したサンプル

Promiseオブジェクトを使用したサンプルです。
ボタンを何回か押すと文字列が変わります。

ボタンを押して下さい

結果

コード

上記コードのサンプルです。

<p>ボタンを押して下さい</p>
<p><span id="span1">結果</span></p>
<input type="button" value="ボタン1" onclick="clickBtn1()">

<script>
function clickBtn1(){
		let s1 = document.getElementById("span1");

		test1()
		.then(ok1 => {s1.textContent = ok1;})
		.catch(error => {s1.textContent = error;});
}

function test1(){
	return new Promise((resolve,reject)=>{

		const rand = Math.random();
		const num = Math.floor(rand*2); //0 or 1

		if(num==0){
			resolve("0です");
		}else if(num==1){
			reject("1です");
		}
	});
}
</script>

3行目のボタンをクリックすると6行目の関数を実行します。
9行目は、14行目の関数を実行します。
15行目は、PromiseのコンストラクタでPromiseオブジェクトを返しています。
引数のresolveは成功を伝える関数でrejectは失敗を伝える関数です。

17,18行目は乱数で0または1を生成します。
20~24行目は、ここではサンプルとして0の場合は成功、1の場合は失敗としています。

10行目のthenは、21行目のresolveが実行された場合に実行されます。ok1の値は21行目の文字列"0です"です。
11行目のcatchは、23行目のrejectが実行された場合に実行されます。errorの値は23行目の文字列"1です"です。

 

順に実行する

順に実行するサンプルです。
1番上のコードの9~11行目にあたります。

function clickBtn1(){

		test1()
		.then(() => {console.log("0の1回目");})
		.then(() => {console.log("0の2回目");})
		.catch(() => {console.log("1です");});
}

4,5行目は、thenが続いています。
成功の場合は、4行目、5行目と順に実行されます。
失敗の場合は、6行目のみ実行されます。

以下は、実行結果のイメージです。
このサンプルでは0を成功としているので、成功の場合は「0の~」が2回表示されます。

 

並行して実行する

並行して実行するサンプルです。
1番上のコードの9~11行目にあたります。

function clickBtn1(){

		Promise.all([
			test1(),
			test1(),
			test1()
		])
		.then(ok1 => {console.log(ok1);})
		.catch(error => {console.log(error);});
}

3行目は、Promise.allとなっています。
この場合、4~6行目の関数は並行して実行されます。

以下は、実行結果のイメージです。
このサンプルの場合、3つの関数の全てで0が出た時は、以下の2行目のように表示されます。配列になっています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

 

どれか1つの処理が完了したら

どれか1つの処理が完了したらのサンプルです。
1番上のコードの9~11行目にあたります。

function clickBtn1(){

		Promise.race([
			test1(),
			test1(),
			test1()
		])
		.then(ok1 => {console.log(ok1);})
		.catch(error => {console.log(error);});
}

3行目は、Promise.raceとなっています。
この場合、4~6行目の関数のどれか1つの処理が完了したら結果を返します。

以下は、実行結果のイメージです。
1つの実行で、結果は1つ返ってきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

関連の記事

JavaScript 一定間隔で処理を繰り返す(setInterval)
JavaScript 指定した時間の経過後1度処理を実行する(setTimeout)

△上に戻る