[TypeScript] 複数のファイルを非同期で読み込み完了するまで待機する処理を実装したい。

Question

質問内容

提示コードですが以下のFileLoad_AsyncWait();関数なのですが以下の動作を実装させたいのですが以下のコンソールログが出てしまいます、
これはどうやって実装するのでしょうか？forEach文の内部の実装方法が知りたいです。

実現したいこと

ファイルを非同期で読み込み全部終わるまで待機して、その結果を配列に格納して返却　する処理

考えたこと

await Promise.all(pro);の返却値がpromise型だからそれをさらにPromise.all()すると考えたのですがうまくいきません。

参考サイト

fetchによるファイル読み込み: https://gray-code.com/javascript/load-file-with-fetch-api/

コンソール表示

undefined

script.ts

async function FileLoad_AsyncWait(pro:string[])
{
    
    //pro.push(fetch("WorkData.html"));
    //pro.push(fetch("DayData.html"));
    let data = await Promise.all(pro);

    let text = new Array();
    data.forEach((d) =>
    {
        text.push(d);
//        text.push(d.text());
    });

    let result = await Promise.all(data);
//    let result = await Promise.all(text);   
    return result;
}
    

window.onload = async function()
{
    let data = new Array();
    data.push("WorkData.html");
    data.push("DayData.html");

    let d = FileLoad_AsyncWait(data);
    console.log(d[0]);

};

Answer 1

ファイルを非同期で読み込み全部終わるまで待機して、その結果を配列に格納して返却　する処理

FileLoad_AsyncWait() の引数のURL配列の内容を取得して配列で返すということですよね。

async function FileLoad_AsyncWait(pro:string[]) {
  return await Promise.all(pro.map(name => fetch(name).then(res => res.text()));
}

...
    let d = await FileLoad_AsyncWait(data);
    console.log(d[0]);

でしょうか。

Comments

[amagami]

ありがとうございます。質問ですがfetch関数で読み込んだデータをテキストを取り出すという動作がres.text()でこの型もまたpromiseだと思うのですがなぜres.text()がまたpromiseなんでしょうか？

[int32_t]

> なぜres.text()がまたpromiseなんでしょうか？

それなりに役立つ質問だと思うので、ついでで聞かないで別の質問を立ててください。

[amagami]

わかりました、今更ですが単一のファイルを読み込みが完了するまで待機するという処理はこれで正解でしょうか？

async function FileLoad_AsyncWait(pro:string) {
let p = await fetch(pro).then(res => res.text());
return p;
}

[int32_t]

そうですね。