skillup

技術ブログ

JavaScript

非同期通信のまとめ($.ajax,fetch,axiosなど)

投稿日:

非同期通信処理に関して、年明けに少し調べたのでメモします。

非同期通信に関しては長い間、$.ajaxを使っておりました。

フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパターンです。今でもレガシーな現場やプロダクトではこれが多いですね・・

$.ajaxでもうまく関数化しておけば、単一の非同期通信ならコールバック地獄にはなりません。

まずい点としては複数の非同期通信などが絡んだ場合にコールバック地獄になりやすい(関数化して、コールバック地獄にならなかったとしても処理の流れがおいずらい)ので非同期通信がガンガン使われるような場合はやはりPromiseを使った方が良いでしょう。

Promiseを使った非同期処理

最初聞いたときはよくわからなかったんですが、プログラミングは理解が半分、慣れが半分なので、ざっくり理解したあとは色々なコードを見ていくことで理解が深まりました。

受験生の時にも感じましたが、「わかれば解ける」ではなく「解ければわかる」ですね。

そんなんで、非同期通信がらみをまとめ。

jQueryを使ったajax

jQueryで古くからよく使われるパターンです。

内部ではXMLHttpRequestというオブジェクトが使われています

Promiseがないので、これ単独ではいいですが、複数の非同期通信の時にカオスになります。

failやalwaysもしっかり、書いておきましょう。特にローディング処理などがある場合、always書いておかないと対処仕切れません。

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ!

fetch

JavaScriptの非同期通信は、XMLHttpRequestを使ってHTTPリクエストを使ったものが主流で$.ajaxはこれをラッピングしたものです。

さらにこれをよりシンプルにし、Promiseを返すようにしたものが、fetchになります。

Promiseを返しますので、結果を受ける側で処理を展開することができます。

POSTする時にheadersをしっかり定義し、JSON.Stringfyを忘れないようにしましょう。

ajaxだと適当に書いても動いてしまいます・・(汗)

Fetch API について

JavaScriptのFetch APIを利用してリクエストを送信する

ちなみにIEなどではそのままでは動かないようです・・・

axios

Promiseをディフォルトで返す、メソッドで

  • XMLHttpRequestの生での書き方のjQueryラッパーが$.ajax
  • Promiseを返す、ラッパーがaxios

になるようです。

Promiseを使うかつライブラリを入れて問題ないのであればこれを使いましょう。

axiosの使い方まとめ (GET/POST/例外処理)

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

npmでのJSライブラリインストール&ビルド(※gulp使用時)

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …