94327


##### 質問内容

提示コードですが`await Promise.all();`の行以降のコードが実行されないのですがこれなぜでしょうか？

##### 調べたこと

1,コメント部`//let t = new Date().getTime() -
time.getTime();`でエラーが起きている可能性を考えコメントアウト  
2,`let pros = []` を`let pros = new Array()`に変更して実験  
3,`await Promise.all();`以外の可能性を考えこれをコメントアウト  
4,`then()`の処理に`console.log()`を追加して検証  
5,`pros.push()`を一個にして実験しましたが同じ場所で処理が進みません

##### 参考サイト

(全件一括(allAtOnce)部): <https://qiita.com/tonio0720/items/6f9319e4cce53256b4c9>  
公式リファレンス：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

##### 実現したいこと

非同期でfetchを用いたファイルロードを行い同期との場合で処理速度の違いを確かめる処理を作成中で  
とりえず非同期を作成中

##### 環境

OS: windows10  
言語: typescript

##### コンソール

[code]

    Main.js:45 配列に格納完了
    Main.js:46 1 test
    Main.js:47 2 test
    Main.js:48 3 test
    Main.js:49 4 test
    
[/code]

[code]

    //let pros = [];
    let pros = new Array();
    
    const textPath = new URL("./sample.txt", import.meta.url);
    
    
    
    async function Async_Fun()
    {
    
    
    
    
    
    
        pros.push( new Promise(() => { fetch(textPath).then( (response) => response.text() ).then( (data) => console.log("1 " + data)); } ));
        pros.push( new Promise(() => { fetch(textPath).then( (response) => response.text() ).then( (data) => console.log("2 " + data)); } ));
        pros.push( new Promise(() => { fetch(textPath).then( (response) => response.text() ).then( (data) => console.log("3 " + data)); } ));
        pros.push( new Promise(() => { fetch(textPath).then( (response) => response.text() ).then( (data) => console.log("4 " + data)); } ));
        console.log("配列に格納完了");
        
        let time = new Date();
    
        await Promise.all(pros);
        //let t = new Date().getTime() - time.getTime();
    
    
        //console.log("time: " + t);
        console.log("time: ");
        
    
    
    
    } 
    
    Async_Fun();
    
    
[/code]


CC BY-SA 4.0
2023-03-26T08:33:22.097
94325
2023-03-26T09:51:30.327
2023-03-26T09:30:04.490
55177
55177
question
typescript
await Promise.all();以降の処理が実行されない原因が知りたい。


>
[code]

>     new Promise(() => { fetch(textPath).then( (response) => response.text()
> ).then( (data) => console.log(data)); })
>  
[/code]

と書かれていますが、 `fetch()` が完了したかどうか、 `response.text()`
が完了したかどうか、を`console.log`等で確認されると止まっている個所が見えてくると思います。

* * *

環境が異なるため参考情報でしかありませんが、Google
Chrome上で同一URLを複数同時に`fetch`した場合にレスポンスの完了を正しく検知できないようで `response.text()`
が返ってこない、という経験があります。  
具体的には 390リクエスト（ユニークで130のURL）を同時に発行したら、高確率で2～3個は止まっていました。


CC BY-SA 4.0
2023-03-26T08:51:08.940
94326
2023-03-26T08:51:08.940
4236
94325
answer


`new Promise(() => { fetch(textPath).then( (response) => response.text()
).then( (data) => console.log("1 " + data)); } )`というプロミスは永遠に **待機**
(pending)の状態であり、 **履行** (fulfilled)になることも **拒否**
(rejected)になることもありません。他のプロミスも同じです。よって、`Promise.all(pros)`が履行済みになることも永遠にありません。

`Promise`コンストラクターの引数として指定する関数では二つの引数(一般に、第1引数を`resolve`、第2引数を`reject`という名前の仮引数名をつける)を受け取っておく必要があります。`Promise`が
**待機**
になると、非同期にその関数が実行されますが、引数として特殊な二つの関数が渡されます。一般に使われる名前を用いて、これを`resolve`と`reject`としておきます。関数内の処理で`resolve`が呼び出される(call)された場合、その引数をつけて
**履行** に状態が移ります。また、`reject`が呼び出される、または、何かしらの例外が発生した場合は **拒否** に状態が移ります。
**単純に関数の処理が終わった場合は、待機のままであり、返り値は無視され、状態が変わることはありません。**

`() => { fetch(textPath).then( (response) => response.text() ).then( (data) =>
console.log("1 " + data)); }`という関数は、第1引数を受け取っていません。そのため、 **履行**
の状態に移るための手段がありません。`fetch(textPath).then( (response) => response.text() ).then(
(data) => console.log("1 " +
data));`の処理が終わろうがどうなろうが、例外が発生しない限り(ただ`fetch`や`then`では例外は発生しないはず)、 **待機**
のままになります。

原因は`Promise`コンストラクターの使い方を理解していないことです。[Promise()コンストラクター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)をよく読んでください。なお、`fetch`は既にプロミス化されていますので、`Promise`コンストラクターを使用してプロミス化する必要はありません。


CC BY-SA 4.0
2023-03-26T09:51:30.327
94327
2023-03-26T09:51:30.327
7347
94325
answer