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

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …