JavaScript
jQuery
promise
TypeScript
Ajax

おじさんが若い時はね$.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を使った見通しのよい幸せなコーディングをしましょう。