はじめよう async/await

Transcript

1. はじめようasync/await
2. “ JSでの非同期処理に async / await 使ってますか？
3. “ バリバリ使ってるよって人？
4. “ 一生使うつもりのない人？
5. “ Promise を使っても構いませんが、 使ったことがない人に向けてasync/await を簡単に説明します
6. なぜ、async / await なのか 1
7. “ Promiseより コードが見やすくなるから
8. “ 実装例 (Promise) function getDataPromise() { getData().then(result => { console.log(result); }); }
9. “ 実装例 (async / await) async function getDataAsync() { const result = await getData(); console.log(result); }
10. “ 非同期処理がもっとたくさんある場合
11. “ 実装例 (Promise) function promisefunc() { sleep1Sec().then(() => { return sleep1Sec(); }).then(() => { return sleep1Sec(); }).then(() => { return sleep1Sec(); }).then(() => { return sleep1Sec(); }).then(() => { console.log('complete'); }); }
12. “ 実装例 (async / await) async function asyncfunc() { await sleep1Sec(); await sleep1Sec(); await sleep1Sec(); await sleep1Sec(); await sleep1Sec(); console.log('complete'); }
13. “ async/await の方が 見やすくないですか？？
14. async methodの説明 2
15. “ asyncメソッド内では、 return -> resolve() throw -> reject()
16. “ 実装例 (return) async function getData() { return 'test'; } getData().then(result => { console.log(result); }); 出力 test 文字列をreturn すると Promise<string> が返却される
17. “ 実装例 (throw) async function getData() { throw new Error(); } getData().catch((e) => { console.log('Error'); }); 出力 Error throw すると呼び出し元で catch できる
18. await の説明 3
19. “ await 演算子は、 async function によって Promise が 返却されるのを待機する
20. “ 実装例 (正常系) async function getData() { return 'test'; } async function getAsyncData() { const result = await getData(); console.log(result); } 出力 test Promiseが返ってくるまで待つ。 resultにはresolve()で渡した値が 設定される。
21. “ 実装例 (異常系) async function getData() { throw new Error(); } async function getDataAsync() { await getData().catch(() => { console.log('Error1'); }); try { await getData(); } catch (e) { console.log('Error2'); } } .catch() が使える try - catch も使える
22. async/await でありがちなミス 使い方を間違えないためのTips 4
23. await を忘れる 実行結果 async function getData() { await sleep1Sec() return 'test'; } async function getAsyncData() { const result = getData(); console.log(result); } Promise{ <pending> } async function の中に await を書かないと 非同期にならない。
24. 結果の比較 async function isSuccess() { await sleep1Sec(); return false; } async function getAsyncData() { if (await !isSuccess()) { console.log('fail'); } else { console.log('success'); } } If (await !asyncFunc()) と書いてしまう
25. 結果の比較 if (await isSuccess() === false) { 結果 success 正しい書き方 === or !== 等を利用して比較してあげればOK。 または、一度変数として取得してから比較する。
26. forEach() の内部で async を使う async function consoleNumber(num) { await sleep1Sec(); console.log(num); } async function consoleArray() { const array = [1, 2, 3]; array.forEach(async num => { await consoleNumber(num); }); console.log('complete'); }
27. forEach() の内部で async を使う for (num of array) { await consoleNumber(num); } 結果 complete 1 2 3 正しい書き方 forEach ではなく、 for - of を利用する。 Array.prototype.forEach メソッドは async functionではなく、 callback に await がついていないから。
28. まとめ
29. “ よくあるミスさえ気をつければ、 async/await は Promiseよりも 見やすい快適なコードを 提供してくれます。 ぜひ、async/await を使いましょう！
30. “ ご清聴ありがとうございました。