94333


##### 質問内容

提示コードの`test1(){}`,`test2(){}`関数ですが内部のようにPromiseを使って複数のファイルを非同期で読み込みたいのですがファイルの中身をpros[0]で見てみても中身がファイルの内容ではありません。これはどうすればいいのでしょうか？

##### 知りたいことA

非同期でファイルを読み込みたい

##### 調べたこと

`fetch()`の戻り値がPromiseで`then`をした`(res) => res.Text()`も非同期  
`test1()`,`test2()`二つの関数を実験

##### 参考サイト

公式リファレンス:
<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise>  
qiita: <https://qiita.com/cheez921/items/41b744e4e002b966391a>  
ブログ: <https://techplay.jp/column/581>  
fecth: <https://breezegroup.co.jp/202004/javascript-fetch/>

##### ファイルの中身

[code]

    test
    
[/code]

##### コンソール

[code]

    new Promise()
    Main.js:46 成功 resolve()
    Main.js:81 Promise {<fulfilled>: undefined}
    
[/code]

##### ソースファイル

[code]

    async function test1()
    {
        pros.push(fetch(textPath));
        pros.push(fetch(textPath));
        pros.push(fetch(textPath));
    
        await Promise.all(pros);
    
        console.log(pros[0]);
    }
    
    
    async function test2()
    {
        pros.push(fetch(textPath).then((res) =>{  res.text(); }));
        pros.push(fetch(textPath).then((res) =>{  res.text(); }));
        pros.push(fetch(textPath).then((res) =>{  res.text(); }));
    
        await Promise.all(pros);
    
        console.log(pros[0]);
    }
    
    
    test2();
    
    
[/code]


CC BY-SA 4.0
2023-03-26T11:09:21.640
94330
2023-03-29T13:26:18.210
2023-03-29T13:26:18.210
7347
55177
question
typescript promise
fetch()関数を使って複数のファイルを非同期で読み込む処理を作りたい


##### 知りたいことAについて (原因)

`pros`配列は`Promise`を入れる配列のためそれを出力しても中身は`Promise`のため知りたい結果である`res.text();`の中身でありません。  
よって

##### 対処方法

`Promise.all`の戻り値を利用する

[code]

    let t = await Promise.all(pros);
    console.log(t[0]);
    
[/code]

[code]

    async function test2()
    {
        pros.push(fetch(textPath).then((res) =>{  res.text(); }));
        pros.push(fetch(textPath).then((res) =>{  res.text(); }));
        pros.push(fetch(textPath).then((res) =>{  res.text(); }));
    
        await Promise.all(pros);
    
        console.log(pros[0]);
    }
    
    
[/code]


CC BY-SA 4.0
2023-03-26T11:27:51.520
94331
2023-03-26T11:27:51.520
55177
94330
answer


質問に 「`fetch()`関数を使って複数のファイルを」とあっても  
それ以上の具体的な処理内容が記されておらず, 回答としても比較的漠然としたものになるでしょう

同じ内容取得しても意味ないので, 実際はそれぞれ URLが異なるのでしょう  
あるいは, その後のプロミスチェーンも異なるなど (例えば JSON として結果を得るなど)  
`Promise.all()` で完了待ちにするにしても, 例えばこの回答の場合 `fetch()` 後の `res.text()`
処理も含めた形で完了待ちにしている

質問のコードで特に問題に思えるのは以下の点

  * `fetch()` からの `res.text()` の結果を返していないこと  
(`promise1`, `promise2`, `promise3` … の処理。値を返すように変更)

  * それぞれの `fetch()` 内容を得ようとしていないこと  
(`res1`, `res2`, `res3`)

後者は, `Promise.all()` に与える `Promise` 配列と, `fetch()` で取得した内容の配列は別物のはずで, それを分けたもの

(問題点に一部対処したコード)

[code]

    async function fetchall() {
      const promise1 = fetch(textPath).then((res) => res.text())
      const promise2 = fetch(textPath).then((res) => res.text())
      const promise3 = fetch(textPath).then((res) => res.text())
    
      const [res1, res2, res3] = await Promise.all([promise1, promise2, promise3])
      console.log(res1,res2,res3)
    }
    
[/code]

* * *

#### 追記

`fetch()` だと その後の処理も示されていないため 確認しづらいものがあります  
以下は, 2つのプロミスとその後続処理, その結果を取得するまでの手順です  
(サンプルとして単純に数値と文字列扱うだけのもの)

[code]

    async function main() {
      const p1 = Promise.resolve(123).then(r => r +2)
      const p2 = Promise.resolve('hello').then(r => r +' world')
      const res = await Promise.all([p1, p2])
      console.log('res =', res)
    }
    
    main()
[/code]

**update**  
質問のコードでは,  
`fetch()` で「textとして扱う」までのプロミスチェーン, それが複数と, その完了待ちのコードです  
もしも内容を確認するなら, プロミスチェーンを伸ばすか, await が必要になるでしょう

以下は後者の場合の例です

[code]

      const res = await Promise.all([promise1, promise2, promise3])
    
      console.log(res.length)
      for await (val of res) {
        console.log('---')
        console.log(val)
      }
    
[/code]


CC BY-SA 4.0
2023-03-26T17:06:53.187
94333
2023-03-29T06:52:16.677
2023-03-29T06:52:16.677
43025
43025
94330
answer