２つのAjaxの連携をどのようにすればよいのかわかりません

Question

２つのAjax処理で困っています。

１つ目のajax の結果によって２つ目のajaxを起動させるかどうかを選択したいと思っています。
下のコードでは１つ目のAjaxを持つ関数funcParam() が true を返せば２つ目のAjaxを持つ
関数funcAnimal()を実行し、false を返したら、処理を中断したいと考えています。

でもよく考えたら、１つ目のAjaxを持つ関数funcParam() から返ってくるのは true か false
かではなく、promiseのオブジェクトですので、true か false を判定しようもないことがわかりました。

goSearch() の中味をどのように書いたらよいのか、教えて下さい。

よろしくお願い致します。　

【code】

function goSearch(){
	var promise1 = funcParam();
	promise1.then(funcAnimal);

}

//  １つ目のAjax	 
function funcParam(){
	var dfd1 = $.Deferred();
	
	var number = $('#numberText').val();

	$.ajax({
		type: "POST",
		url: "../code/SearchCategory.php",
		data: {"number":number},
		dataType: 'text',
		
	}).done(function(response) {
		
		if(response == "bird"){
			$('#categoryText').get(0).value = response;
			return true;
		}else{
			return false;
		}
		
		dfd1.resolve();
			
	}).fail(function(response) {
		alert('error－１');
		
	}).always(function() {
	});

	return dfd1.promise();

}


//  ２つ目のAjax
function funcAnimal(){
	var dfd2 = $.Deferred();
	
	var category = $('#categoryText').val();

	$.ajax({
		type: "POST",
		url: "../code/SearchAnimal.php",
		data: {"category":category},
		dataType: 'text',

	}).done(function(response) {
		
		$('#nameText').get(0).value = response;

		dfd2.resolve();
							
	}).fail(function(response) {
		alert('error－２');
		
	}).always(function() {
	});

		return dfd2.promise();
}

Comments

[m.ts10806]

些細な誤変換とは思いますがそれで中味→中身

意味が通じなくなることもあるので…
「処理内容」とか、それしかない表現をすることも文章で伝える上でのテクニックですね

Answer 1

resolve()の引数で渡せばいいかと思います。
Promise.resolve() - JavaScript | MDN

といいますか、そもそも$.ajax()は$.Deferredのインターフェースを持っているので、thenableです。

Comments

[shaketonori]

素早い回答ありがとうございました。
回答が付くのは月曜日以降と思って油断していました。

deferredはステータスを持っていて、処理の過程で変化することは理解していましたが、
「Promise.resolve() メソッドでvalueを渡す」という意味が理解できませんでした。

教えて頂いたMDNのサイトだけではよくわからず、関連するサイトも見てみましたが、
いろいろな用語が出てきて、混乱しています。

もう少し噛み砕いて、具体的にどのように記述すればよいか教えて頂けないでしょうか。

よろしくお願いいたします。

[Lhankor_Mhy]

resolve()の引数で渡した値は、then()の引数で受け取れます。
なので、
dfd1.resolve(trueOrFalse);
とし、
promise1.then( trueOrFalse => { if (trueOrFalse) funcAnimal() } );
などとすればいいだろう、と思いました。

あるいは、そもそも reject してしまう、というのもひとつの手かもしれませんね。

[shaketonori]

回答が遅くなって申し訳ありません。
昨日１日格闘して、Lhankor_Mhyさんの教えて頂いた通りresolve()とthen()の間で判断結果を渡して、動くことが確認できました。
その後３つのAjaxをつなげてもうまくいくとこができました。

本当にありがとうございました。

Answer 2

コードが汚くなるかもしれませんが、

return true;

を書いている行でfuncAnimal()を呼び出すのはダメでしょうか？
（動くとは思いますが、だめですよね...）

Comments

[shaketonori]

siruku6さん、回答ありがとうございました。
今回は別の方法で対応できました。
ありがとうございました。