jqueryで$.ajaxの非同期処理を書く

$.ajaxの単体の記事はわりと良くみかけるけど、多段の場合のサンプルがなかなか見つからなかったのでメモ。

callback地獄を抜け出す為に、最近は、javascript自体にgeneretorやらpromiseやらが備わっているが、jqueryにはDeferredという仕組みが備わっており、jqueryの主要な関数に既に組み込まれているのでそちらを使っていく

• jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと…
• 爆速でわかるjQuery.Deferred超入門 - Yahoo! JAPAN Tech Blog
• jQueryのDeferredを用いたモダンなAjax処理の書き方 - Hack Your Design!

Deferredの仕組みは解説ページにまかせるとして、要点としてはreturnとしてdeffered objectを返すようにする。そして、$.ajaxはdeffered objectを返しているので、そのままメソッドチェーンで書くことができる。

なので、$.ajaxだけを使って指定した順番で$.ajaxのリクエストを処理するのであればdeffered objectを意識することなく。こうかける。

• url /a,/b,/cにhttpリクエストを送りリクエストが成功したらdoneをコンソールに書く

$.ajax('/a')
.then($.ajax('/b'))
.then($.ajax('/c'))
.done(console.log('done'))

ここで、/aにアクセスしたあと/aのレスポンスを元に/bのアクセスを変えるだけであればこう書ける。

$.ajax('/a')
.then(
  function(data){
    console.log(data)
    return  $.ajax('/b')
  }
)
.then($.ajax('/c'))
.done(console.log('done'))

ここではじめてdeffered objectを意識する必要が出てくる。$.ajaxはdeffered objectを返しているため、単一であれば意識することなくそのままメソッドチェーンができたが、そうでない場合は、それを考える必要がある。そうはいっても、ようは関数ブロックの中でdefferedオブジェクトを作ってreturnで返してあげるだけである。