Javascript MEMO

await

JavaScriptで非同期処理の結果が返ってくるまで待機するためのキーワードです。
JavaScriptは前の処理を待たずに次の行を実行しますが、
await を使うことで、あたかも同期処理（上から順番に実行）のようにコードを書くことができます。

[基本的なルール]

(1) await を使う関数には、必ず関数(function)の前にasyncを付ける必要があります。
(2) await の後ろには、通常 Promise オブジェクトが来ます。
(3) Promise の結果（成功または失敗）が出るまで、その関数の実行を一時停止します。

copy

async function test()
{
// レスポンスが返ってくるまでここで待機する
const response = await fetch("https://api.example.com/data");
// JSONの解析が終わるまで待機する
const blob = await response.blob(); 
const url = URL.createObjectURL(blob);
const img = document.getElementById("img");
img.src = url;

}
test();
/*
[try...catchの例]
awaitのエラーはtry..catchを使用するのが一般的です。
*/
async function test2()
{
	try
	{
		// レスポンスが返ってくるまでここで待機する
		const response = await fetch("https://api.example.com/data");
		// JSONの解析が終わるまで待機する
		const blob = await response.blob(); 
		const url = URL.createObjectURL(blob);
		const img = document.getElementById("img");
		img.src = url;
	}
	catch(error)
	{
		console.log("error:"+error);
	}
}
test2();

async function test3()
{
	f1();
	f2();
	await f3();
	f4();
}
function f1()
{
	...
}
async function f2()
{
	...
}
async function f3()
{
	...
}
async function f4()
{
	...
}

copy

async function test()
{
	// Wait here until the response is returned.
	const response = await fetch("https://api.example.com/data");
	// Wait until JSON parsing is complete.
	const blob = await response.blob();
	const url = URL.createObjectURL(blob);
	const img = document.getElementById("img");
	img.src = url;
	
}
test();
/*
[try...catch example]
It is common to use try.catch to handle await errors.
*/
async function test2()
{
	try
	{
		// Wait here until the response is returned.
		const response = await fetch("https://api.example.com/data");
		// Wait until JSON parsing is complete.
		const blob = await response.blob();
		const url = URL.createObjectURL(blob);
		const img = document.getElementById("img");
		img.src = url;
	}
	catch(error)
	{
	console.log("error:"+error);
	}
}
test2();

async function test3()
{
	f1();
	f2();
	await f3();
	f4();
}
function f1()
{
	...
}
async function f2()
{
	...
}
async function f3()
{
	...
}
async function f4()
{
	...
}

test3の実行結果について

[f2の実行]

f2はf1の結果を使えるとは限りません。
f1の処理に非同期処理(ajaxなどのフェッチやsetTimeoutなど)が実行されチエル場合
f1()と実装するだけでは、f1の処理を完了するまで待機するわけではないため
f2が動いた場合、f1の処理結果を使用できるとは限りません。

[f3の実行]

f3を実行した場合も同様で
f1とf2の処理は完了したかどうかについての保証がないため
f3が動いた場合、f1およびf2の実行した結果を使用できる保証がありません。

[f4の実行]

f4を実行した場合
f3の実行結果は使用できます。
しかし、上記に述べた通り、f3で正しく結果を使えない場合は
想定した結果にはなりません。
f1とf2の結果については終わっているとは限らないため、
こちらもf1とf2の処理結果を使用できるとは限りません。

複数の独立した非同期処理がある場合、一つずつ await すると時間がかかります。
効率化を図る方法としてPromise.all()を使用する方法があります。
ただし、Promise.allもtest1とtest2関数を実行する場合
test2の実行にtest1の実行結果が必要となる場合は、正しい結果を得られる保証はありません。
その場合は、awaitを使って実装することになります。
(例)
async function test()
{
const r1 =await f1();//f1が終わるまで待機
const r2 =await f2(r1);//f1の結果(r1)を使用してf2を実行
}

awaitなし

スタートからエンドまで待たずに途中でも次の処理が実行可能となります。
そのためtest1とtest2があると仮定した場合
test1の結果をtest2が必要としても
test1の結果が準備される前にtest2の処理が実行される可能性があるため
test2がtest1の実行結果を受け取らないまま実行すると
正しい結果をtest2は実行できない可能性がでてしまいます。

awaitあり

スタートからエンドまでが保証されているため
確実に処理を実行できます。

このように依存関係がある処理はawaitを使用することを視野に入れた実装が必要となります。