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

nas

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

確認環境
・Windows 10
・Google Chrome

目次

Promiseオブジェクト

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

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

ボタンを押して下さい

結果

コード

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

3行目のボタンをクリックすると6行目の関数を実行します。
9行目は、14行目の関数を実行します。
17,18行目の結果(0か1)によって21行目のresolveまたは23行目のrejectが実行されます。
10,11行目は、上記の結果がresolveのときは.then、rejectのときは.catchが実行されます。

<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>

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です"です。

 

順に実行する

4,5行目のようにthenを続けると順に実行されます。

function clickBtn1(){

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

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

 

並行して実行する

3～7行目のようにPromiseのallメソッドと関数を並べると並行して実行されます。

function clickBtn1(){

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

以下は、実行結果のイメージです。
2行目は、3回連続で0が出た時に表示されます。配列になっています。

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

 

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

3～7行目のようにPromiseのraceメソッドと関数を並べるとどれか1つの処理が完了したら結果を返します。

function clickBtn1(){

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

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

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

関連の記事

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

△上に戻る