Ajaxの雛形パターン #JavaScript

Ajaxについて調べているときに、雛形となる書き方が複数あり
どれがどう違うのかわからなかったので調べてみた。

1.thenを使ったパターン

javaScript

$.ajax({
  url: '/api/topics',
  type: 'get',
  datatype: 'json',
})
.then(
  data => console.log(data),
  error => alert('読み込み失敗')
);

そもそも、thenについてよくわかっていなかったのだが調べてみると
Promiseオブジェクトのメソッドだとわかった。

でもAjaxのなかでPromiseオブジェクト呼び出してないじゃん？！
jQueryのAjaxではPromiseを返すんですね。それ早く教えてほしかっった。

厳密にはｊQueryのjqXHRオブジェクト(jQueryのXMLHTTPRequestオブジェクト)が
Promiseを実装しているということ。

非同期の状態遷移には以下のパターンがある

unresolved -> 初期状態。後続の処理は実行されない。
resolved　-> 通信が成功した状態
rejected -> 通信が失敗した状態

この非同期処理の状態が変化したときに関数を実行するためのメソッド。後続関数という。

then() -> 引数を２つもち、resolvedになったときと、rejectedになったとき2つの処理を実行する。
done() -> 状態がresolvedになったときの処理を実行する。
fail() -> 状態がrejectedになったときの処理を実行する。
always() -> 状態がresolvedになったときと、rejectedになったとき両方で実行する。

つまり、今回のthen（）パターンでは、成功すればconsole.logに吐き出し、失敗すればalertを出すというようになっている。

2.done failを使ったパターン

javaScript

$.ajax({
      url:'/api/topics',
      type:'POST',
      data:{
        'userid':$('#userid').val(),
        'passward':$('#passward').val()
      }
    })
    // Ajaxリクエストが成功した時発動
    .done( (data) => {
      console.log(data);
    })
    // Ajaxリクエストが失敗した時発動
    .fail( (data) => {
      alert('読み込み失敗');
    })
    // Ajaxリクエストが成功・失敗どちらでも発動
    .always( (data) => {
  });Script

これはthenを使わず、doneとfailで分けた書き方。

3.error処理の引数

javaScript

$.ajax({
    url:'/api/topics',
    type:'POST',
    data:{
      'userid':$('#userid').val(),
      'passward':$('#passward').val()
    }
  })
  // Ajaxリクエストが成功した時発動
  .done( (data) => {
    console.log(data);
  })
  // Ajaxリクエストが失敗した時発動
  .fail( (jqXHR, textStatus, errorThrown) => {
    $("#XMLHttpRequest").html("XMLHttpRequest : " + jqXHR.status);
    $("#textStatus").html("textStatus : " + textStatus);
    $("#errorThrown").html("errorThrown : " + errorThrown);
  });

promiseの処理がわかれば、もう大丈夫だと持ったらfail()の引数がなんだこれ、っていうときもある。

それぞれの意味は以下の通り

jqHMR.statusはHTTPステータスが取得
textStatusはエラー情報（timeout、error、parsererror等の文字列）を取得
errorThrownは例外情報を取得

4.success,errorのパターン

javaScript

$.ajax({
  url: '/api/topics',
  type: get,
  dataType: 'html',
  success: function(data) {
    $('.result').html(data);
    console.log(data);
  },
  error: function(data) {
    alert('読み込み失敗');
  }
});

たまに上記のパターンも見かけて訳わからなくなるが
これはjQuery1.5以前の古いパターンなので、あまり必要ないかもしれない。

"success"と"error"は"url"等と同様でajaxで指定可能なプロパティであり
通信成功（失敗）時に実行されるコールバック関数を示す。

ライブラリを使用しないパターンについて

XMLHttpRequestオブジェクトを利用して、通信を行う。これが本当の雛形ですね。

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) { //状態を示す。4はリクエスト終了でレスポンスの準備が完了した状態。
    if(xhr.status ===200) { //ステータス番号を返す。404でNotFoundなど。
      alert(xhr.responseText); //jQueryでdataに当たる部分。
    }
  }
};

xhr.open('GET', 'URL'); //リクエスト。メソッドとURL
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //送信される前に、ラベル/名前のペアをヘッダに追加
xhr.send(null); //サーバーへリクエストを送信

通信をタイムアウトさせる処理。

let timerId = window.setTimeout(function() {
  xhr.abort();
}, 5000); //５秒毎に処理を中断

xhr.onreadyst = function() {
  if(xhr.readyState === 4) {
    window.clearTimeout(timerId) //成功すれば、タイムアウト処理を実行しない。
  }
}

他にもありそうだが、とりあえず調べたパターンは以上です。
ご指摘いただければ助かります。

参考資料
XMLHttpRequest についてのメモ
 JavaScriptがちょっとわかる人向けの、Ajaxの話。
JavaScript Promiseの本
 Ajaxの通信エラー情報を表示する方法