promiseとpromise.allの同期処理におけるthenの挙動

Question

前提

ajaxによる関数を同期処理と非同期処理を組み合わせてコードを書いています。
そこでthenによる挙動が思い通りにいかないのでご教示いただきたいです。

実現したいこと

実行されるメソッドの順番が

1. getData1()
2. getData2(id)*10(非同期処理)
3. then

となるようにしたいです。
以下のコードを実行すると、1が完了した後に3が実行されてしまいます。2の処理を待ってからthenを実行するにはどのようなコードを書けばよろしいでしょうか。

該当のソースコード

const getData1= () => {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'GET',
            url: URL1,
            dataType: 'jsonp',
            data: {
                menu: menu 
            },
        })
        .done(function(out){
            resolve(out.data)
        })
        .fail(function() {
            console.log('エラー')
            reject()
        })
    })
}

const getData2= (id) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'GET',
            url: URL2,
            dataType: 'jsonp',
            data: {
                id: id
            },
        })
        .done(function(out){
            resolve(out.data)
        })
        .fail(function() {
            console.log('エラー')
            reject()
        })
    })
}

(async () => {
    await getData1()
    const ids = [...Array(10).keys()]

    await Promise.all([
        ids.map(async (id) => {
            getData2(id)
        })
    ])
    .then(() => {
        console.log("after promise.all")
    })
})()

Answer 1

質問にある

3.then

の直前のawait Promise.all(･･･) のところは下記でよいかと思います：

- await Promise.all([
-        ids.map(async (id) => {
-            getData2(id)
-        })
-    ])
+ await Promise.all(ids.map(getData2))

以下にて上記のコードを動作確認できます。

• デモ 👉 https://codepen.io/su507/pen/eYrWOzE?editors=0012

上記のデモでは、getData1およびgetData2の実際にAPIをリクエストするところをsetTimeoutを使ったモック的なものに置き換えてます。getData2が返す各Promiseがresolve されるまでの時間をランダムに変えることで、Promise.all によってすべてのPromiseがresolveされてからthenのコールバックが実行されることを確認するようにしています。

Comments

[moose1]

ご回答の方法を自身の環境上で試したところ、うまく実行されました。
デモまで用意していただきありがとうございます。
なぜうまくいくのかまだ理解が追いついていませんのでpromiseについて勉強をしていきたいと思います。

[退会済みユーザー]

理解のために
> promiseについて勉強

したのち、下記を整理するとよいかと思います。
まず第1に

1) Promise.all() の引数にはPromiseの配列を渡す必要がある

ということです。（質問にあるコードはそうなっているでしょうか？）
次に、

2) ids をmap することによって 1) の Promise.all() に渡すPromiseの配列を作りたい

ということならば、

3) では ids.map(fn) するときに map に渡す関数 fn について
　- fn の第一引数は何か？
　- fn は何かを返さなければならないのか？返さなければならないとすれば何を返さなければならないか？

4) 3)の要件を満たすように map に渡す関数 fn を書けば、
ids.map(id => {
return fn(id);
})
と書く必要がなく
ids.map(fn)
と書いて済ませられる。

といった点を点検するとよいでしょう。

Answer 2

    await Promise.all([
        ids.map(async (id) => {
            getData2(id)
        })
    ])

この部分ですが、mapの引数とした関数がgetData2(id)の結果と関連を持たないため、中でgetData2が生成したPromiseはただ捨てられます。

getData2の前にawaitを書くか、id => getData2(id)とPromiseを返り値とするかをしましょう。