for文で動的なimportをループさせたとき、全ての成功を待つには。

Question

###for文で動的なimportをループさせたとき、全ての成功を成功を待つには。
タイトル通りです。
私は以下のようにしてループ内で動的なimportを行おうとしています。

.then(()=>{
    for (let item of hoge_list) {
        import(`../${item}.png`)//変数に応じて動的に取得
           .then((response) => {
                //成功したときの動作。
           })
    }
}.then(response=>{
  console.log(response)
})

しかしこれでは全てのimportの成功を待つことはできないのではないかと思いました。
なのでPromise.allを利用しようとしました。
それぞれのimportを無名変数としてリストにpushし、それをreturnするやりかたです。

.then(()=>{
  var f_list = [];//functonのリスト
  for (let item of hoge_list) {
    let a = ()=>{
      import(`../${item}.png`)//変数に応じて動的に取得
        .then((response) => {
            //成功したときの動作。
      })
    };
    f_list.push(a)
  }
  return Promise.all(f_list);
}).then(response=>{
  console.log(response)
})

ですがこの結果を見てみると[ƒ, ƒ]というように関数のリストが格納されているだけで、//成功したときの動作。が行われていないことが確認できました。

これはなぜでしょうか？
どうすれば、for文で動的なimportをループさせたとき、全ての成功を待つことはできるのでしょうか？

Comments

[yambejp]

いきなり「.then」から始められても・・・
最低限実行可能なソースを提示してください

そもそもすべてを成功させるというのは
失敗がなければすべて成功するはなしであって、
失敗があったときに、止めるか無視するかその他例外処理するかですよね？
成功の保証の定義をもっとちゃんとしてください

[退会済みユーザー]

↑その通りですね、成功を待つことはできても保証はできないですね。
回答で指摘しようと思ってましたが忘れてました。
言葉は正確に使いましょう。

[hood]

yambejpさん。コメントありがとうございます。
>いきなり「.then」から始められても・・・
.thenの前には大量のPromiseが連なっています。全て書くと複雑になりすぎるのと今回の処理とは関係ない動作だったので、省略させていただきました。そのことをきちんと記すべきだったと思います。

>成功の保証の定義をもっとちゃんとしてください
そうですね。定義ができていなかったです。失敗があったときに例外処理をすることです。そのことを書くべきでした。

dyoshikawaさん コメントありがとうございます。
>成功を待つことはできても保証はできない
そうですね。言葉の使い方を間違いました。
ご指摘ありがとうございます。あとで修正したいと思います。

Answer 1

import って画像読み込みもできるんですか。
webpackでゴニョゴニョしたらできるのかな、ちょっと知らなかったです。

まあimportがPromiseを返しているという仮定でいうと、

let a = ()=>{
      import(`../${item}.png`)//変数に応じて動的に取得
        .then((response) => {
            //成功したときの動作。
      })
    };

ここで無駄に関数に入れたら実行されません。

質問者さんのやろうとしていることが正しければ import() 自体がPromiseを返す関数なので、

const f_list = []
for (const item of hoge_list) {
  f_list.push(import(`../${item}.png`))
}

こんな感じでPromiseを返す関数を配列に入れていきます。
その後Promise.allすれば処理が終わった後thenの中に入ります。

Promise.all(f_list).then(() => console.log('完了'))

本題ではないですが今回のコードでは変数宣言は全部 const にした方が良さそうです。

Comments

[hood]

回答ありがとうございます。
>import() 自体がPromiseを返す関数
そうだったのですね。importについてまだ理解をしていないと痛感させられました。
具体的なコードものせてくださり、ありがたいです。早速試してみようと思います！
>今回のコードでは変数宣言は全部 const にした方が良さそう
なるほど・・・いわれてみればそうですね。スコープについてもあやふやな面があるので、もう少しきちんと考えようと思いました。
アドバイスありがとうございました！！

Answer 2

importの有効性がちょっとわからないのでfetchしてみるとかでどうしょう？

var hoge_list=["hoge","fuga","piyo"];
Promise.all(
  hoge_list.map(
    x=>fetch(x).then(x=>x.status)
    )
  ).then(res=>{
    var message=res.filter(x=>x!=200).length>0?"error":"success";
    console.log(message);
  });

Comments

[hood]

回答ありがとうございます。
以前、私もimportは不自然だなと思ってfetchに置き換えたくて、質問したことがありました。
https://teratail.com/questions/198625
ここで
>import()は、コンパイル時に処理されます
との回答をいただき、変数をimportのurlに埋め込む私のコードでは、fetchにリファクタリングすることができないのだと結論づけました。

fetchを使える方法は他にあるかもしれませんが、とりあえず動くのでimportでいいかなと思ってます。

コードものせていただき、ありがとうございます。
今後fetchの使い方の参考にさせていただこうと思います。

[yambejp]

受け取る対象が画像で、成功か失敗か見ない（statusのみチェック）なら
fetchだと思いますけどね・・・

[hood]

確かに前の質問ではtxtだったからできなかったけど、imgではできるのかもしれませんね。

後で試してみようかと思います。