0
質問内容

提示コードですが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

コンソール
Main.js:45 配列に格納完了
Main.js:46 1 test
Main.js:47 2 test
Main.js:48 3 test
Main.js:49 4 test
//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();

2 件の回答 2

5

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待機になると、非同期にその関数が実行されますが、引数として特殊な二つの関数が渡されます。一般に使われる名前を用いて、これをresolverejectとしておきます。関数内の処理で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));の処理が終わろうがどうなろうが、例外が発生しない限り(ただfetchthenでは例外は発生しないはず)、待機のままになります。

原因はPromiseコンストラクターの使い方を理解していないことです。Promise()コンストラクターをよく読んでください。なお、fetchは既にプロミス化されていますので、Promiseコンストラクターを使用してプロミス化する必要はありません。

2
  • ありがとうございます。質問ですが既にPromiseであるfecth()関数はどう利用すればいいのでしょうか?結果のtext()を取り出して表示したいのですがか? Commented 2023年3月26日 10:03
  • fetch(textPath).then( (response) => response.text() ).then( (data) => console.log("1 " + data))は何ですか?プロミスですか?それとも違いますか?これがどういうものであるか自分の言葉で説明できますか?もし、説明できれば、答えは自ずとわかるはずです。
    – raccy
    Commented 2023年3月26日 11:05
2
new Promise(() => { fetch(textPath).then( (response) => response.text() ).then( (data) => console.log(data)); })

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


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

3
  • ありがとうございます。それぞれのthen()の処理にconsole.log("1 " + data));を追加して番号を置き換えて実験したのですが正常に4っのコンソールログが表示されるため正常でした。 Commented 2023年3月26日 8:58
  • @samidare_chan コードが書かれていないので私には判断できませんが、正常ならよいのでは?
    – sayuri
    Commented 2023年3月26日 9:07
  • いえ、そういう意味ではなく正常にコンソールが出力されているので回答の内容のようなことが原因ではなく別の何かが原因であるということがわかりました、つまり未解決です。 Commented 2023年3月26日 9:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。