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

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

アーカイブ