Edited at

おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶)

jQueryでAjaxを使う時、こんな書き方していませんか?


昔の$.ajax()

$.ajax({

url: "http://jsrun.it/assets/E/H/Z/t/EHZt3",
success: function (data) {
$("#results").append(data);
},
error: function () {
alert("読み込み失敗");
}
});
// urlを適当なものに変更すると「読み込み失敗」のアラートが出ます。

これはInternet Explorer 6(故)が猛威を振るっていた時代の、jQuery1.4くらいの旧い書き方です。「成功したらさらに非同期通信をしたい」「失敗したら別の処理をしたい」等、他の処理が多くなるに連れてコールバック地獄に陥り、バグの温床となります。

もう辞めましょう。。。


イマドキの$.ajax()はこう書く

イマドキは、jQueryのDeferredオブジェクトthen()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。複雑なコールバック地獄から解消され、すっきりと見通しのよいコードを記述できます。ECMAScript 2015のPromiseそのものとは違い、IEでも動作します

then()の使い方は下記です。


$.ajax()のイマドキの書き方

$.ajax({

オプション
})
.then(成功時の処理, 失敗時の処理);

では、冒頭のコードをthen()を使ったコードに書き換えてみましょう。


$.ajaxとthen()の実例

$.ajax({

url: "http://jsrun.it/assets/E/H/Z/t/EHZt3"
})
.then(
// 1つめは通信成功時のコールバック
function (data) {
$("#results").append(data);
},
// 2つめは通信失敗時のコールバック
function () {
alert("読み込み失敗");
});
// urlを適当なものに変更すると「読み込み失敗」のアラートが出ます。


アロー関数でもっとイマドキに

上記のコードはECMAScript 2015のアロー関数を使って下記のように記述できます。


アロー関数でもっとイマドキに

$.ajax({

url: 'http://jsrun.it/assets/E/H/Z/t/EHZt3'
})
.then(
data => $('#results').append(data),
error => alert('読み込み失敗')
);

※ アロー関数はIE 11で非対応なので、必要に応じてTypeScriptやBabelで変換してください


新時代の$.ajax()を

比較的最近作られたWebコンテンツ等を見ても、いまだ古い$.ajax()の書き方をしているコードを見かけます。Promiseを使った見通しのよい幸せなコーディングをしましょう。