SIBYL System

jQueryのajaxでDeffered/Promiseを使う

 jQuery ajaxの書き方

jQueryのajaxに関してよく見かけるサンプルはこうです。

ajax.htmlにアクセスして、ステータスコード200が返ってきたらsuccessのfuctionが実行され、それ以外のステータスコードの場合は、errorのfunctionが実行されます。

ただし、この記述は前回述べた死のピラミッドが形成されてしまいます。「ajaxでAの情報を取得した後にBの情報を取得する」という場合は以下のようになります。

さらにさらに、「ajaxでAの情報を取得した後にBの情報を取得して、更にその後にCの情報を取得して・・・」となると・・・

死のピラミッドが形成されてきました。作った当時は良いけど、あとからこのコードを見直したり、別の人が保守作業をする場合に地獄を見ます。

jQuery.Deferredを使う

$.whenを使うとまとめる事ができます。ajaxで各情報を取得できた場合に.done()が実行されます。各ajaxの結果情報はhoge, fuga, piyoに格納されているので使えます。また.fail()メソッドをチェーンするとどれか1つでもajaxが失敗した場合fail()を実行します。

ただし、この場合は並列な実行となるため「a.htmlで取得した情報をパラメータにしてb.htmlをajaxする」といった処理は記述できません。その場合は.thenでチェーンすると良さそうです。

ajax()が成功した場合に.then()が実行されます。ajax(‘a.html’)の実行結果は_hogeに格納されているので_hogeの情報を使って更にajax()を実行しています。.thenでチェーンし続けることで、非同期で実行しつつ死のピラミッドが形成されていません。

最後に各変数の情報をconsole.logで表示していますが、最後にすべての情報を表示させようとすると_hoge, _fuga変数はスコープ外なので、変数を一度外に保存しておかないといけません。これはちょっと綺麗じゃないですね。

 

モバイルバージョンを終了