Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした