いろいろな方法で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を学ぶ人にとっての参考になれば幸いでございます。