ajaxHoge1(), ajaxHoge2(), ajaxHoge3() の全員に 自動的に同じオブジェクト obj を渡したい。 そして順番に処理させたい
ajaxHoge1(obj) // 1番目の処理 .then(ajaxHoge2) // 2番目の処理 .then(ajaxHoge3); // 3番目の処理
/** * 1番目の処理 * @param obj {Object} 全員で使いまわすオブジェクト */ function ajaxHoge1(obj){ console.log("Hoge1 はじまるよ"); var defer = $.Deferred(); // deferred変数 $.ajax({ url: "hoge1.php", dataType: 'json', data: {"data": obj.hoge1} // hoge1でのデータなど }).done(function(json,status,xhr){ console.log("Hoge1 成功したよ"); obj.hoge2 = json.result; // 引き継ぎたい情報があればここで編集できる defer.resolve(obj); // ★成功フラグ立てる showResult(obj); // フラグを立てた後は、バックグラウンドで並列に処理される }).fail(function(xhr, textStatus, errorThrown){ console.log("Hoge1 失敗したよ"); defer.reject(obj); // ★失敗フラグ立てる }); return defer.promise(); }
大事なのは、defferd変数をちゃんと作ってobjを登録するところ。
- 注意1
- 状態変更をする(★のところ)と、その瞬間に次の処理が実行される。
なので、次に進む前にやっておきたい処理は必ず状態変更前におこなう - 注意2
- 呼び出し時に .done でなく .then で処理をつなげているのは、成功/失敗の状態変更がおこなわれるまで待たせるため。
.done でつなげると、Hoge1が成功したら Hoge2とHoge3が並列に実行される
ajaxHoge1(obj) // 1番目の処理 .done(ajaxHoge2) // 2番目の処理 1番目が成功したらすぐ動く .done(ajaxHoge3); // 3番目の処理 1番目が成功したらすぐ動く .then(ajaxHoge4); // 4番目の処理 1番目が成功したらすぐ動く .then(ajaxHoge5); // 5番目の処理 4番目が成功するまで動かない
また、このとき Hoge2 や Hoge3 のなかで obj を編集しても 次に引き継がれないので注意する
(Hoge4が引き継ぐのは Hoge1の obj)