【javascript】Promiseとはもうさよなら?async・awaitを使って非同期処理をかっこよく記述しよう!

いままで、AjaxでAPIからデータを取得するときやSetTimeout等で非同期処理を行う場合、【Promise】を利用して処理をしてきました。

しかし、async・awaitという記述がES2017から加わったおかげで、Promiseを使わずとも、非常に簡単に非同期処理を記述できるようになりました。

今回は、ES2017で新規に追加されたjavascriptの【async・await】を使って、簡単に非同期処理を記述する方法を紹介します!

Promiseをつかった非同期処理

Promiseオブジェクトを使って、WebAPIからデータを取得する場合。

上記のように、fetchでデータを取得して返ってきたPromiseオブジェクトを解決するために【then】を使って、メソッドチェーンのように【then・catch】を繋いでいかないといけなかったです。

もちろん、これだけでも、コールバックを連続して、深いネストを作り出していくコールバック地獄を避けられるメリットは大きかったのは事実です。

しかし、メソッドチェーンのようにthenが縦に並んでいく記述方法は、SPA(シングルページアプリケーション)などで必要とされる複雑なデータ処理だと苦しくなってきます。

そこで、登場したのが、【async・await】です。

async・awaitをつかった非同期処理

こちらがasync・awaitの記述方法です。

非常にシンプルで読みやすくないですか?

  • 非同期処理が発生する関数にasyncをつける
  • その関数内で、処理を待たなければならない部分にawaitをつける

それだけで、上から順に処理を行っていき、非同期処理で起こりがちな「下に書いた記述なのに、非同期処理が終わってないから、先に実行されてしまった(涙)」という状況がなくなります。

最新ブラウザを利用するか、Babel等でコンパイルが必要

async・awaitは、ES2017で実装された非常に新しい記法です。

そのため、古いブラウザで実行しても、エラーになってしまいます。

最新のブラウザで実行すれば正常に起動しますが、js界隈ではWebpackやBabel等を使ってフロントエンド開発をすることは常識になりつつあるので、Babelを利用して、どのブラウザでも正常に動作するようにしましょう。

それでは、よい、jsライフを!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。