[JavaScript]ForOfの処理をPromise.allに移行したいです。

Question

前提

Vue2系でアップロードの処理を開発しているのですが、async.awaitを使用するためにForOfで処理するように記述しています。
しかし、並列処理にしたい観点からForOfからPromise.allに移行しようと考えております。

実現したいこと

ForOfで行っている処理をPromise.allに移行して同じ動作がするようにしたいです。

発生している問題・エラーメッセージ

Promise.allで書き換えてみたのですが、上手くアップロード処理が行われず（主にUpdate処理が）、書き方が間違っている気がしてならないです。
エラー等は吐いていません。

該当のソースコード

async uploadAlbum() {
      //forEachはasync・await出来ないからforOfで
      for (const [index, file] of Object.entries(this.imageFiles)) {
        if (!file) {
          return;
        }
        const fileType = file.type.replace("image/", "");
        const currentUser = getAuth().currentUser;
        const relativePath = `user/${currentUser.uid}/${index}.${fileType}`;
        this.imageFiles[index] = await this.mixinUploader__upload(
          file,
          relativePath
        );
      }
       // forOfで書いた場合
      // await Promise.all(
      //   Object.values(this.imageFiles).map(async (file, index) => {
      //     if (!file) {
      //       return;
      //     }
      //     console.error(file);
      //     const count = index + 1;
      //     const fileType = file.type.replace("image/", "");
      //     const currentUser = getAuth().currentUser;
      //     const relativePath = `user/${currentUser.uid}/${count}.${fileType}`;
      //     this.imageFiles[count] =
      //       await this.mixinUploader__upload(file, relativePath);
      //   })
      // );
    },

試したこと

Promise.all で自分なりに書いてみたが書き換えが上手く動作しない

補足情報（FW/ツールのバージョンなど）

Vue2系

Comments

[maisumakun]

> 上手くアップロード処理が行われず

何が行われて何が行われていない状況なのか、もう少し詳細をいただくことはできますでしょうか。

Answer 1

修正の要点としては下記です。

1. Promise.all() には引数としてPromiseの配列を渡す必要がある。
2. 1.のPromise の配列を map で作るのであれば、map に渡す関数はどの場合でもProimseまたは (if(!file) の場合には)即resolveされる値を返す必要がある。
3. 1.のPromiseの配列の要素となるのは this.mixinUploader__upload(file, relativePath) の返すPromiseが元になる。ただし次の 4. に注意する。
4. アップロード結果から、this.imageFiles を再構成できるようにするために、 this.mixinUploader__upload が返すPromiseがresolveされて得られる値（つまりアップロード処理の成功時のレスポンス）を、 this.imageFilesオブジェクトのキーである index と紐付けた、キーと値のペアが最終的にresolveされる値として必要
5. 4.によってindexとアップロード結果のペアの配列が得られたら、これを元にObject.fromEntries() して得られるオブジェクトでthis.imageFilesをアップロード結果に更新できる。

上記を踏まえるとuploadAlbum()メソッドは以下のような感じになるかと思います。

  async uploadAlbum() {
    const uploadingPromises =
      Object.entries(this.imageFiles).map(([index, file]) => {
        if (!file) {
          return [index, { error: new Error('Oops! file is empty 😓') }];
        }
        const fileType = file.type.replace("image/", "");
        const currentUser = getAuth().currentUser;
        const relativePath = `user/${currentUser.uid}/${index}.${fileType}`;
        return this.mixinUploader__upload(
                  file,
                  relativePath
                ).then(uploadResult => [index, uploadResult]);
      });
    try {
      const fileEntriesAfterUpload = await Promise.all(uploadingPromises);
      this.imageFiles = Object.fromEntries(fileEntriesAfterUpload);
    } catch (e) {
      console.error(e);
    }
  }