Promiseを使った非同期ループ処理の書き方について

by moongift : 2016/02/22

JavaScriptで常に頭を悩ませるのが非同期処理ではないかと思います。非同期処理を幾つも実行したりすると、思ったタイミングで処理が走らないといったことが多々あります。

そんな中でループ処理になると、特に厄介ではないでしょうか。そこで今回はPromiseを使ったループ処理について紹介します。

0から10まで順番に処理をしたら抜けるループ

非同期処理でない場合は次のように書けます。

view raw

index.js

hosted with ❤ by GitHub

厄介なのは非同期処理時です。まず、基本形として次のようにPromiseを考えます。

view raw

index.js

hosted with ❤ by GitHub

この処理は一瞬で終了してしまいます。コンソールにも特に何もメッセージは出ません。この中でループ処理を行うようにします。この時、注意するのは非同期処理がターゲットと言うことです。そのため、loop関数の中でもPromiseを使って処理を行うようにして、処理順番を保証します。

	new Promise(function(res, rej) {
	function loop(i) {
	return new Promise(function(resolve, reject) {
	setTimeout(function() {
	console.log(i);
	resolve(i+1);
	}, 100);
	})
	}
	loop(0);
	}).then(function() {
	console.log("Finish");
	})

view raw

index.js

hosted with ❤ by GitHub

これにより、非同期処理（setTimeout）が実行された後、resolveが実行されるようになります。後は内側のPromiseについて、then処理を書きます。

	// ループ処理の完了を受け取るPromise
	new Promise(function(res, rej) {
	// ループ処理（再帰的に呼び出し）
	function loop(i) {
	// 非同期処理なのでPromiseを利用
	return new Promise(function(resolve, reject) {
	// 非同期処理部分
	setTimeout(function() {
	console.log(i);
	// resolveを呼び出し
	resolve(i+1);
	}, 100);
	})
	.then(function(count) {
	// ループを抜けるかどうかの判定
	if (count > 10) {
	// 抜ける（外側のPromiseのresolve判定を実行）
	res();
	} else {
	// 再帰的に実行
	loop(count);
	}
	});
	}
	// 初回実行
	loop(0);
	}).then(function() {
	// ループ処理が終わったらここにくる
	console.log("Finish");
	})

view raw

index.js

hosted with ❤ by GitHub

thenの中で処理判定を行い、ループを抜けるかどうかの判定を行っています。これで非同期処理における処理順番の保証と、処理完了時に次の処理につながる部分ができました。

JavaScriptにおける非同期処理のループはかなり面倒であるというのが分かるかと思います。JSDoc: Namespace: asyncを使うと非同期処理におけるループがこれくらい分かりやすく書けるようになります。以下は処理を5回繰り返すという指定です。

	var loop = h5.async.loop(new Array(5), function (i, v) {
	var deffered = h5.async.deferred();
	var loop = function (count) {
	setTimeout(function () {
	console.log(count);
	deffered.resolve(count);
	}, 100);
	};
	loop(i);
	return deffered.promise();
	}).done(function () {
	console.log("処理完了");
	});

view raw

index.js

hosted with ❤ by GitHub

コメントは受け付けていません。