JavaScript Promiseを使用するサンプル

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

確認環境
・Windows 10
・Google Chrome

目次

Promiseオブジェクト

Promiseオブジェクトを使用するサンプル

Promiseオブジェクトを使用するサンプルです。
ボタンを何回か押すとコンソールにOKまたはNGの文字列が表示されます。

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

<script>
function clickBtn1(){
		test1()
		.then(a1 => {console.log(a1);}) // OK
		.catch(b1 => {console.log(b1);}); //NG
}
function test1(){
	return new Promise((resolve,reject)=>{

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

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

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

13行目は乱数で0または1を生成します。
15~19行目は、サンプルとして0の場合は"OK"、1の場合は"NG"としています。

7行目のthenは、16行目のresolveが実行された場合に実行されます。a1の値は16行目の"OK"です。
11行目のcatchは、23行目のrejectが実行された場合に実行されます。b1の値は18行目の"NG"です。

 

順に実行する (then)

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

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

<script>
function clickBtn1(){
		test1()
		.then(a1 => {console.log(a1 + "1");})
		.then(() => test1())
		.then(a1 => {console.log(a1 + "2");})
		.catch(b1 => {console.log(b1);});
}
function test1(){
	return new Promise((resolve,reject)=>{

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

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

7~9行目は、thenが続いています。
8行目は、12行目のtest1関数を呼び出しています。
成功(resolve)の場合は、7~9行目が順に実行されます。
失敗(reject)の場合は、10行目が実行されます。

以下は、実行結果のイメージです。

 

並行して実行する (all)

並行して実行するサンプルです。

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

<script>
function clickBtn1(){

	Promise.all([
			test1(),
			test1(),
			test1()
		])
		.then(a1 => {console.log(a1);})
		.catch(b1 => {console.log(b1);});
}
function test1(){
	return new Promise((resolve,reject)=>{

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

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

7行目は、Promise.allです。
この場合、8~10行目の関数は並行して実行されます。

以下は、実行結果のイメージです。
8~10行目の関数が全て成功(resolve)の時は、以下の2行目のように表示されます。
配列になっています。

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

 

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

どれか1つの処理が完了したらのサンプルです。

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

<script>
function clickBtn1(){

	Promise.race([
			test1(),
			test1(),
			test1()
		])
		.then(a1 => {console.log(a1);})
		.catch(b1 => {console.log(b1);});
}
function test1(){
	return new Promise((resolve,reject)=>{

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

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

7行目は、Promise.raceです。
この場合、8~10行目の関数のどれか1つの処理が完了したら結果を返します。0

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

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

関連の記事

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

△上に戻る