2022/11/16

async,awaitについて

JavaScript

何ものか

簡潔に非同期の処理を書くためのもの

関数にasyncをつけた時の挙動

1. Promiseを返すようになる

let asyncFunc = async () => {
	return 'hello';
};
let result = asyncFunc();
console.log(result); // Promiseが入っている

↑async関数の中でreturnされると内部的にresolveされるので PromiseStateは”fulfilled”になり、PromiseResultにはreturnされた値が入る。 async関数の中でthrowされればrejectされる

Promiseとは

2. await演算子が使えるようになる

↓async関数の中でawait演算子につなげて新しいwebApi(Promiseを返すもの)を実行すると結果が受け取れる

let asyncFunc = async () => {
	let result = await navigator.mediaDevices.getUserMedia({video: true});
	console.log(result); // video情報を取ってきてからlog出力される
};

あくまでも同期的に処理が行われる

↓awaitで繋げる事で非同期の処理を同期的処理の様に描ける様になる

• Tweet