LoginSignup
633

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-02-22

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を使った見通しのよい幸せなコーディングをしましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
633