大雑把にどんなもの?
async/awaitはこんな感じです。
波動拳 → Promise → async/await
understanding async/await in 7 seconds pic.twitter.com/IJOQJ2DR35
— Wassim Chegham (@manekinekko) 2017年4月22日
少し詳しく
1行目: 関数宣言時にasyncをつけてやると準備完了です (ES7の機能なのでyarn addとかは別途必要です
3行目: Promiseを返す関数(非同期処理)を呼び出す際に先頭にawaitをつけてやると同期的に処理を待つことが出来ます
7行目: async/awaitは途中で処理を抜けることができるので使い勝手がPromiseより高いです
18, 19行目: async/awaitの関数の返り値はPromiseで包まれます。
13行目: Demo関数の中で実行する関数がPromiseのrejectで解決する場合はtry/catchで拾うことが出来ます。
async function Demo() {
try {
const registration1 = await navigator.serviceWorker.ready; // awaitをつけると同期的にまつ
const registration2 = navigator.serviceWorker.ready; // awaitをつけないと非同期的
if (registration1 === null) {
return 'result1'; // 途中で処理を抜けることができる
}
// ~~~ なんか処理 ~~~
return 'result2';
} catch (e) {
throw new Error(`faile Demo: ${e}`);
}
}
const demoRes = Demo(); // 返り値はPromiseでラップされている
demoRes.then((res) => console.log(res)); // result2 (result2のreturnで解決していた場合