JavaScriptを扱う上で避けては通れない非同期通信について
今回はJavaScriptの非同期通信について書いてみます。
JavaScriptを使った開発の中で、非同期通信の理解は必須です。
非同期通信について調べると必ずこのような単語が出てきます。
[XHR,fetch,Promise,async await,axios]
中には各用語の関係性がわからず混乱してしまう人もいるのではないでしょうか
（私がそうです。）
今回は自分なりに非同期通信に関わるオブジェクトやAPIをなるべく噛み砕いて説明して見ようと思います。
(コードの書き方ではなく、そのもっと手前の部分に注視してみます。)
拙い図ではありますが、全体を把握するための画像を添付します。
非同期通信は二つの処理から成り立っている。
非同期通信は[非同期処理]と[HTTP通信処理]の組み合わせです。
本来はそれぞれ別の用途に用いることができますが、[HTTP通信処理]を実行するにおいて、[非同期処理](実行順序を制御する。とも言い換えることができます。)は実質必須のため、同列に語られることがほとんどです。
同列に語られるが故にそれぞれの役割を分離して見ることが難しい場合があります。
非同期通信で使う三つの機能
※XHRとFetchAPIは似たような機能ではありますが、仕組みや使い方そのものは違います。
それぞれの違いの説明は省きますが、JavaScriptにはHTTP通信する機能が二つあると思ってください。
HTTP通信のみを担うAPI
1. XMLHttpRequest(XHR)
HTTP通信と非同期処理を担うAPI
1. Fetch
非同期処理機能
1.Promise
この三つの機能の組み合わせでJavaScriptの「非同期通信」は成り立っています。
Promiseは基本必須なので、[XHR]か[Fetch]のどちらを使うかが重要になります。
- XHR + Promise
- Fetch (FetchAPI + Promise)
なぜFetchが単体で利用できるかと言うと、FetchはFetchAPIとPromiseが合わさった機能だからです。
これがFetchがPromiseベースと言われる由縁です。
async awaitとは何か
より詳しい記事がたくさんあるため詳細は省きますが、Promiseをより使いやすくしたものだと思ってください。
(俗に言う糖衣構文です。)
重要なのは、ベースはPromiseで出来ているので、下記のような使い方が可能と言うことです。
XHR + async await(Promise)
Fetch + async await（Promise）
axiosとは何か
axiosは XHR+Promiseの処理をより簡単に扱えるようにしたライブラリです。
XHR+Promiseを使ったHTTP通信ライブラリは他にもあり、そのうちの一つと考えてください。
まとめ
使いやすいかどうかは別ですが、下記のような組み合わせで使うことが出来ます。
XHR + Promise
XHR + async await(Promise)
Fetch(fetchAPI + Promise) + async await(Promise)
axios(XHR + Promiseの組み合わせをより扱いやすくするライブラリ)
もし私のように混乱してしまった人の理解が少しでも深まると嬉しいです。
参考にさせて頂いた資料です。
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/
https://sbfl.net/blog/2017/01/29/fetch-api/