JavaScript, jQueryにて、非同期に並列で実行し、かつ結果を順次処理したい

Question

###前提・実現したいこと
AJAXで値を取得する複数の関数があります。

これらを、JavaScript, jQueryにて、非同期に並列で実行し、かつ結果を順次処理したいです。

###該当のソースコード
次のソースコードでいいますと

func1()
func2()

は並列で実行しながら、

console.log(respose1);
console.log(respose2);

はそれぞれ取得完了次第、順次処理したいということです。

(つまり、func1() の取得完了次第、console.log(respose1); を処理したい。)

$(function() {
	$.when(
		func1(),
		func2()
	).done(function(respose1,respose2) {
		console.log(respose1);
		console.log(respose2);
	}).fail(function() {
		console.log('エラーです');
	});

	function func1(){
		const def = $.Deferred(); 
		$.ajax({
			url : 'http://example.com/ajax',
			type : 'POST',
			data : {id:1}
		}).done(function(response1) {	
			def.resolve(response1); 	
		});
		return def.promise();	
	}

	function func2(){
		const def = $.Deferred(); 
		$.ajax({
			url : 'http://example.com/ajax',
			type : 'POST',
			data : {id:2}
		}).done(function(response2) {	
			def.resolve(response2); 	
		});
		return def.promise();	
	}
});

###試したこと
$.when.applyを使ってみたのですがこれも順次というわけにはいきませんでした。

const functions = [ func1(), func2() ];
$.when.apply(null, functions).then(
	function ( ...responses ){
		responses.forEach( function(response, i) {
			console.log(respose);
		});
	}
});

もし良い方法がありましたら宜しくお願い致します。

Answer 1

const func1=()=>new Promise(resolve=>setTimeout(()=>resolve(1),3000));
const func2=()=>new Promise(resolve=>setTimeout(()=>resolve(2),1000));
const func3=()=>new Promise(resolve=>setTimeout(()=>resolve(3),2000));

const wrap=async(func)=>console.log(await func());
console.log("start");
Promise.all([
  wrap(func1),
  wrap(func2),
  wrap(func3),
  ]).then(res=>console.log("end"));

Comments

[tarakorakko]

Awesome!大変勉強させて頂きました。どうもありがとうございます。

[tarakorakko]

あの、一つだけよろしいでしょうか

.then(res=>console.log("end"));
のresには何か返すことができるのでしょうか？

.then(res=>console.log("endのresはこれ→",res));
としてみましたら

endのresはこれ→ Array(3) [ undefined, undefined, undefined ]
とコンソールに表示されましたが、

ひょっとしたらこれらの undfined も、何かすれば func1 の結果などを受け取ることができるのかと思いまして

[yambejp]

consoleとは別に結果をうけたいならこんな感じですかね

const wrap=async(func)=>{var ret=await func();console.log(ret);return ret;};
console.log("start");
Promise.all([
wrap(func1),
wrap(func2),
wrap(func3),
]).then(res=>{console.log(res);console.log("end")});

[tarakorakko]

wrapでreturnするとそこに入るんですね。
いやぁ！お見事！脱帽すぎます。最後までご説明感謝致します。

[tarakorakko]

ここには追加で質問するようなコメントがありましたが、別途質問を投稿致しましたためコメントは削除させて頂きました