Zenn
🌊

asyncとawaitについてメモ

2022/07/16に公開
JavaScript
tech

この記事について

asyncを調べる機会があったので、自分なりに抑えときたいポイントだけ抜粋してまとめました。

asyncとは?

関数の前につけることにより、その関数は必ずPromiseオブジェクトを返すようになります。

async function hoge()
{
	return "hoge"; #PromiseObjectを返す
}

hoge.then((res)=>
{
	console.log(res); #consoleにはhogeと出力させる
})

awaitとは？

  • async関数の直下、もしくはmoduleのトップスコープにのみ使える。
  • awaitはPromiseObjectの前に付けることが出来る。
  • awaitをPromiseObjectに付けると、そのPromiseObjectが解決するまで、その行以降の関数は実行されない。

そのためこのような関数は

hoge = await hoge();
console.log(hoge);

このような書き方もできる。

hoge.then((hoge)=>
{
	console.log(hoge);
})

awaitはmoduleのトップスコープにのみ使える

<script type="module">
hoge = await hoge(); #エラーにならない
function test()
{
	hoge = await hoge(); #エラーになる
}
</script>

参考

Javascript Primer(https://jsprimer.net/basic/async/)

Discussion