いろいろな方法でajax処理を書いてみた

考えてみると「そこでajaxしてるの？」とチームメンバーに偉そうに聞くことはあるものの、実際にajaxするコードを書いたことがなかったと思い実際に複数パターン書いてみました。

前提

リクエストおよびデータ取得先はJSON Placeholderを利用

https://jsonplaceholder.typicode.com/

以下リクエスト先から写真データの一覧を取得してみます

https://jsonplaceholder.typicode.com/albums/1/photos

ライブラリなしでajax処理

var ajax = new XMLHttpRequest();
ajax.open('GET', 'https://jsonplaceholder.typicode.com/albums/1/photos');
ajax.responseType = 'json';
ajax.send(null);

ajax.onreadystatechange = function(){
    // ajaxリクエスト成功
    if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200){
        for(var i=0; i<this.response.length; i++){
        var data = this.response[i];
        // 写真データのURLをログに出力
        console.log(data.thumbnailUrl);
        }
    }
}

jQueryでajax処理

$(function(){
    $.ajax({
      type: "GET",
      url: "https://jsonplaceholder.typicode.com/albums/1/photos",
      dataType : "json"
    })
    // ajaxリクエスト成功
    .done(function(response){
      for(var i=0; i<response.length; i++){
        var data = response[i];
        // 写真データのURLをログに出力
        console.log(data.thumbnailUrl);
      }
    })
    // ajaxリクエスト失敗
    .fail(function(XMLHttpRequest, textStatus, errorThrown){
        console.log(errorThrown);
    })
});

axiosでajax処理（IEで動きません）

axios.get('https://jsonplaceholder.typicode.com/albums/1/photos')
// ajaxリクエスト成功
.then(function (response) {
    for(var i=0; i<response.data.length; i++){
        var data = response.data[i];
        console.log(data.thumbnailUrl);
    }
})
// ajaxリクエスト失敗
.catch(function (error) {
    console.log(error);
})
// 最後に実行される処理
.finally(function () {
    console.log('Complete!!');
});

まとめ

3通り試してみましたが、どれでもサクッと処理を書くことはできました。
比較してみたところ、axiosが一番可読性高く実装できそうな印象でした。
多段階のリクエストなど、複雑な処理が必要な場合はaxiosを利用するのがようさそうという感想です。

これからajaxを学ぶ人にとっての参考になれば幸いでございます。