• JSDeferred とは
• jQuery.ajax のメソッドチェーンとエラーハンドリング
• 実例: 友達リストとデータをまとめて取得する
• 関連リンク

JSDeferred とは

JSDeferred は、非同期処理をメソッドチェーンで記述することで、非同期処理の順序や値の受け渡し、エラーハンドリングの複雑さを解消するライブラリです。作者は cho45 さんです。JSDeferred の特徴や優位性は、JSDeferred による非同期処理 Hitoshi Amano で紹介されていますので、見てください。

jQuery.ajax のメソッドチェーンとエラーハンドリング

opensocial-jquery は、JSDeferred を使って jQuery.ajax を拡張します。そして、次のように jQuery.ajax とそのショートカットのメソッドチェーンとエラーハンドリングを容易します。

  $.getJSON('http://example.com/foo.json').next(function(foo) { // -- (1)
    console.log('next', foo);
    return $.getJSON('http://example.com/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) の jQuery.getJSON で /foo.json のデータを取得します。成功したときは (2) に続きます。失敗したときは (4) でエラーハンドリングして終了します。次に (2) jQuery.getJSON で /bar.json のデータを取得します。成功したときは (3) に続き、このときの引数が /foo.json と /bar.json の配列になります。失敗したときは (4) でエラーハンドリングして終了します。(4) のエラーハンドリングは、jQuery.ajax の error イベントの status か、throw したオブジェクトが引き渡されます。

jQuery.ajax の非同期のコールバックを next メソッドでチェーンして、その順番どおり実行させることができます。このとき、上から下に向かって、ネストしているときは、親から子に向かってという順番になります。そして、そのチェーンの中でエラーが発生したとき、error メソッドでエラーをハンドリングできます。チェーンのはじめや途中でエラーが発生したときは、そこでチェーンが中断するので、エラーのハンドリングは 1つで済むということです。また、jQuery.ajax のショートカットは、エラーのコールバックをサポートしていませんが、jQuery.getJSON や jQuery.post でも error メソッドを使ってエラーのハンドリングができます。

実例: 友達リストとデータをまとめて取得する

jQuery.ajax を使って VIEWER の友達リストとそのデータをまとめて取得できます。はじめに友達リストを取得し、次にそのデータを取得してまとめています。また、エラーハンドリングも1箇所にまとめています。

  $.ajax({
    url: '/people/@viewer/@friends',
    data: {},
    dataType: 'data'
  }).next(function(people) {
    return $.ajax({
      url: '/appdata/@viewer/@friends',
      data: {},
      dataType: 'data'
    }).next(function(data) {
      return $.map(people, function(person) {
        if (data[person.id])
	  person.data = data[person.id];
	return person;
      });
    });
  }).next(function(people) {
    $.each(people, function(i, person) {
      console.info(person.id);
      console.info(person.data);
    });
  }).error(function(e) {
    console.error(e);
  });

関連リンク

• Enhancing of jQuery.ajax with JSDeferred