JavaScript Async Await

Transcript

1. 簡単非同期 async await インターン 笹 和成
2. 非同期処理とは
3. 重い処理をバックグラウンドで動かすこと ストレージへのアクセス、サーバとの通信、 SQLの発行... ・普通の計算処理に比べて何倍も遅い。 ・遅いデータを待っている間、全てが動かなくなったら困る ・重い処理はバックグラウンドで動かそう
4. JavaScriptの非同期処理 ajax(‘hoge.com’, (res) => { // resを使った処理 }) ajax(‘hoge.com’) .then((response) => { // res を使った処理 }) callback関数 Promise 本日のテーマ: async await
5. callback地獄 (~ 2015) ajax(‘//hoge.com/data’, (response) => { getDataFromDisk(response.path, (imageData) => { try { convertImage(imageData, (newImageData) => { ajax(‘//hoge.com/post’, newImageData, (response) => { appendToDOM(response.image); } ); }) } catch (e) { console.error(‘ エラーデス’, e) } }) })
6. Promise ( 2015 ~ ) ajax(‘//hoge.com/data’) .then((response) => { return getDataFromDisk(response.path) }) .catch(e => throw e) .then((imageData) => { return convertImage(imageData) }) .then((newImageData) => { return ajax(‘//hoge.com/post’, newImageData) }) .then((response) => { appendToDOM(response.image); }) .catch((e) => { console.log(‘エラーデス’, e); });
7. async / await ( 2017 ~ ) const response = await ajax(‘//hoge.com/data’); const imageData = await getDataFromDisk(response.path); try { const newImageData = await convertImage(newImageData); const { image } = await ajax(‘//hoge.com/post’) appendToDOM(image); } catch (e) { console.log(‘エラーデス’, e); }
8. 今すぐ使えるasync await
9. await 演算子は async関数の中でしか使えない async function someFunction() { // 処理 } class SomeClass { async someMethod() { // 処理 } } Function Class Method const someFunction = async () => { // 処理 } Arrow Function `async`を付ければasync関数になる
10. async関数は必ずPromiseを返す const asyncFunc = async () => { return ‘hello’; } console.log(someFunc()); // => Promise{<pending>} asyncFunc() .then(console.log); // => ‘hello’ const callFunc = async () => { const str = await asyncFunc(); console.log(str) // => ‘hello’ }
11. return すると resolve, throw すると reject const asyncFunc = async (bool) => { if (!bool) throw new Error(‘エラーデス’) return ‘Hello World’ } asyncFunc(true) .then(console.log) // => ‘Hello World’ asyncFunc(false) .then(console.log) // => Error: ‘エラーデス’ asyncFunc(false) .catch(_ => console.log(‘catch だよ’)) // => ‘catchだよ’ async関数 -> Promise
12. Tips & 使いどき
13. Tips: Promiseのメソッドと同時に使える const asyncFunction = async () => { const json = await fetch(‘/getJson’) .then(r => r.json()); // .thenを使った方が良い場合もある (Fetch API等) const res = await fetch(‘/getJson’) const json = await res.json(); const data = await throwable() .catch(e => { console.error(‘ エラーデス’, e); }) // .catchを使えばtry-catchで囲む必要がなくなる try { const data = await throwable(); } catch (e) { console.error(‘ エラーデス’, e); } }
14. Tips: 並列実行も簡単 const asyncFunction = async () => { const goodAjax = ajax(‘/good’); const greatAjax = ajax(‘/great’); const poorAjax 　　　 = ajax(‘/poor’); const results = await Promise.all( [goodAjax, greatAjax, poorAjax] ) console.log(results); // => [ /goodのデータ, /greatのデータ, /poorのデータ ] } 一度に実行すれば効率が良い！
15. 使いどき: 一つの関数に複数の非同期がある時
16. 使いどき: 処理量の多い関数の時 const initialFetch = async () => { const data = await fetchData(); longFunction(data); soLongFunction(data); // … /// expensiveFunction(data); } ネストは{長く, 深く}なるほど悪 一関数 一インデントを目指したい
17. # まとめ ・async awaitはPromiseをスッキリ書ける ・await演算子はresolveの内容を取得する ・async関数はPromiseを返却する ・async awaitで簡単楽しい非同期処理