とっとこ駆け出しエンジニアぶろぐ: jQuery.Deferredをやってみる

新年明けましておめでとうございます。2014年初投稿でございます。

今年の４月から晴れて晴れて社会人になります。あと数ヶ月の学生生活を悔いなく過ごしたいですね。

最近はブログの更新と英語の勉強をしています。社会人になっても続けていこうと思います。

さて、今回はjQuery.Deferredをやってみたいと思います。

前々から名前は聞いたことがあるけどやったことがなかったのでチャレンジしたいと思います。

$.ajax({
    url: 'a.json'
}).success(function(data) {
    //a.json取得に成功
    $.ajax({
        url: 'b.json',
        data: data
    }).success(function(data) {
        //b.json取得に成功
        $.ajax({
            url: 'c.json',
            data:data
        }).success(function(data) {
            //c.json取得に成功
            alert('成功');
        });
    });
}).error(function(data) {
    //a.json取得に失敗
    alert('失敗');
});

$.ajax({
    url: 'a.json'
       })
.then(function(data) {
    return $.ajax({
                url: 'b.json',
                data: data
                });
})
.then(function(data) {
    return $.ajax({
                url: 'c.json',
                data: data
                });
})
.done(function(data) { alert('成功'); })
.fail(function() { alert('失敗'); });

$.when($.ajax({url: 'a.json'}), $.ajax({url: 'b.json'}), $.ajax({url: 'c.json'}))
.done(function(data_a, data_b, data_c) {
        alert('成功');
})
.fail(function() { alert('失敗'); });

var getName = function(file_name) {
    var dfr = $.Deferred();
    $.ajax({url: file_name})
    .done(function(data) {
            dfr.resolve(data['name'] + 'さん');
        })
    .fail(function() {
            dfr.reject(file_name + 'を取得できませんでした');
    });
    return dfr.promise();
};
$.when(getName('a.json'), getName('b.json'), getName('c.json'))
.done(function(data_a, data_b, data_c) {
        console.log(data_a);
        console.log(data_b);
        console.log(data_c);
        alert('成功');
})
.fail(function(msg) { alert(msg); });