いままで、AjaxでAPIからデータを取得するときやSetTimeout等で非同期処理を行う場合、【Promise】を利用して処理をしてきました。
しかし、async・awaitという記述がES2017から加わったおかげで、Promiseを使わずとも、非常に簡単に非同期処理を記述できるようになりました。
今回は、ES2017で新規に追加されたjavascriptの【async・await】を使って、簡単に非同期処理を記述する方法を紹介します！
Promiseをつかった非同期処理
|
1 2 3 4 5 6 7 |
function promiseTest() { fetch('http://hogehoge.com/users') .then(res => res.json()) .then(json => console.log(json)) } promiseTest(); |
上記のように、fetchでデータを取得して返ってきたPromiseオブジェクトを解決するために【then】を使って、メソッドチェーンのように【then・catch】を繋いでいかないといけなかったです。
もちろん、これだけでも、コールバックを連続して、深いネストを作り出していくコールバック地獄を避けられるメリットは大きかったのは事実です。
しかし、メソッドチェーンのようにthenが縦に並んでいく記述方法は、SPA(シングルページアプリケーション)などで必要とされる複雑なデータ処理だと苦しくなってきます。
そこで、登場したのが、【async・await】です。
async・awaitをつかった非同期処理
|
1 2 3 4 5 6 7 8 |
async function asyncTest() { const res = await fetch('http://hogehoge.com/users') const json = await res.json() console.log(json); } asyncTest(); |
非常にシンプルで読みやすくないですか？
- 非同期処理が発生する関数にasyncをつける
- その関数内で、処理を待たなければならない部分にawaitをつける
それだけで、上から順に処理を行っていき、非同期処理で起こりがちな「下に書いた記述なのに、非同期処理が終わってないから、先に実行されてしまった(涙)」という状況がなくなります。
最新ブラウザを利用するか、Babel等でコンパイルが必要
async・awaitは、ES2017で実装された非常に新しい記法です。
そのため、古いブラウザで実行しても、エラーになってしまいます。
最新のブラウザで実行すれば正常に起動しますが、js界隈ではWebpackやBabel等を使ってフロントエンド開発をすることは常識になりつつあるので、Babelを利用して、どのブラウザでも正常に動作するようにしましょう。
それでは、よい、jsライフを！
