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を意識することなく。こうかける。
$.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で返してあげるだけである。