Enhancing of jQuery.ajax with JSDeferred: jQuery.ajax チェーンとその short cut のエラーハンドリング

Enhancing of jQuery.ajax with JSDeferred は、JSDeferred を使って、jQuery.ajax チェーンとその short cut のエラーハンドリングを実現するものです。

Enhancing of jQuery.ajax with JSDeferred は JSDeferred の内、Deferred オブジェクトのみを抜き出して、jQuery.ajax を上書きするという作りにしています。

jquery.ajax.deferred.js

もともと JSDeferred も jQuery サポートを提供していますが、フルスペックの JSDeferred は不要だし、jQuery.ajax のエラーハンドリングが期待どおりじゃなかったので、コンセプトを絞って小さくまとめてみました。ですので、まずはオリジナルの JSDeferred をあたってみてください。

Enhancing of jQuery.ajax with JSDeferred を使うと、次のようなコードが書けるようになります。

$.getJSON('/foo.json').next(function(foo) { // -- (1)
console.log('next', foo);
return $.getJSON('/bar.json').next(function(bar) { // -- (2)
console.log('bar', bar);
return [foo, bar];
});
}).next(function(foobar) { // -- (3)
console.log('foobar', foobar[0], foobar[1]);
}).error(function(status) { // -- (4)
console.log('error', status);
});

はじめに (1) の $.getJSON で /foo.json のデータを取得します。成功したときは (2) に続きます。失敗したときは (4) でエラーハンドリングして終了します。

次に (2) $.getJSON で /bar.json のデータを取得します。成功したときは (3) に続き、このときの引数が /foo.json と /bar.json の配列になります。失敗したときは (4) でエラーハンドリングして終了します。

(4) のエラーハンドリングは、jQuery.ajax の error イベントの status ("error" や "parseerror" など)か、throw したオブジェクトが引き渡されます。

このコードからも分かるとおり、Enhancing of jQuery.ajax with JSDeferred は、次のような利点があります。

jQuery.ajax の非同期のコールバックを next メソッドでチェーンして、その順番どおり実行させることができます。このとき、上から下に向かって、ネストしているときは、親から子に向かってという順番になります。

そして、そのチェーンの中でエラーが発生したとき、error メソッドでエラーをハンドリングできます。チェーンのはじめや途中でエラーが発生したときは、そこでチェーンが中断するので、エラーのハンドリングは 1つで済むということです。

また、jQuery.ajax の short cut はエラーのコールバックをサポートしていませんが、jQuery.getJSON や jQuery.post でも error メソッドを使ってエラーのハンドリングができます。

もちろん、次のとおり、オリジナルのコードもそのまま動きます。そのときの状況に応じて使い分けることができます。

$.ajax({
url: '/foo.json', dataType: 'json',
beforeSend: function(xhr) {},
success: function(data, status) {},
error: function(xhr, status, e) {},
complete: function(xhr, status) {}
});

はじめは、非同期のコールバックをチェーンするという仕掛けが理解しにくい印象があったのですが、使ってみると慣れてきて、だんだん手放せなくなってきています。JSDeferred を開発している cho45 さん に大感謝です。