JavaScriptにおける同期スタイルのプロミス

Promise hell問題を解決するために、非同期コードをはるかに簡単に書けるようにする特別なプロミス構文が考案されました - 同期スタイルで書くことができます。

それでは、その学習を始めましょう。まずは前のレッスンのコードを見てみます：

function func() {
	getSmth(2).then(res => {
		console.log(res); // 4を出力
	});
}

func();

もし関数getSmthが同期関数だった場合、関数funcのコードは次のように書き換えることができたでしょう：

function func() {
	let res = getSmth(2);
	console.log(res); // 4を出力
}

しかし、関数getSmthは非同期なので、上記のコードは動作しません。ですが、プロミスの同期スタイルを利用すれば、同様のことを実現できます。やってみましょう。

まず、特別なキーワードasyncを使って関数funcを非同期関数として宣言する必要があります：

async function func() {
	
}

その後、関数func内部で特別なキーワード awaitを使用できるようになります。このキーワードはプロミスの前に書くことで、 JavaScriptにそのプロミスが完了するまで待機させます。その後、このキーワードはプロミスの結果を返し、コードの実行が再開されます。

今回の場合、getSmthの呼び出しの前に awaitを書く必要があります。この関数の呼び出し結果はプロミスなので、そのプロミスが完了した後にのみコードの実行が続行されます。そして、プロミスの結果を変数に代入できます。上記を実装してみましょう：

async function func() {
	let res = await getSmth(2);
	console.log(res); // 4を出力
}

func();

では、getSmthを複数回呼び出してみましょう：

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // 13を出力
}

func();

次に、ループ内でgetSmthを呼び出してみます：

async function func() {
	let arr = [1, 2, 3, 4, 5];
	let sum = 0;
	
	for (let elem of arr) {
		sum += await getSmth(elem);
	}
	
	console.log(sum);
}

func();

以下のコードを同期構文で書き直してください：

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();