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

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-63e4 …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

アーカイブ