【Firebase】非同期処理におけるデータ・ファイル取得の方法【FireStore】

前書き

前回の記事にてデータの取得について書きました。
melheaven.hatenadiary.jp

前回の記事では非同期処理に関する考え方が甘いなと感じました。
今回の記事では、asyncとawaitを使って、
データを取得するまでは実行を止めるというコードを書きました。

AsyncとAwait

async functionを定義すると、必ずPromiseとして返します。
async functionが値をreturnした場合、Promiseは戻り値をresolveし、
例外や何らかの値をthrowした場合はその値をrejectします。

async function内でPromiseの結果が返されるまで待機する演算子がawaitとなります。

qiita.com

実装

Vueファイル

Vueファイルでは、Home.vueにてマウントした際に、
データと画像ファイルを一気に取得します。
Vueではthen()の中でthisを適用できなかったので、
もう少し良いやり方ないかなと思いました。

mounted: async function() {
    this.maps = await getAllData().then(res => {
      return res;
    });
  },

JSファイル（データ取得）

データを取得する→画像ファイル取得の順にコードを実行しています。
async awaitを多用しまくって、もっとシンプルな書き方あるかと思いましたが、
今の私には精一杯。

export async function getAllData() {
    let buffData = [];
    const snapshot = await db.collection("comments").get().catch(() => {
        alert("エラーが発見されました");
    });
    snapshot.forEach(doc => {
        async function download() {
            let getData = await downloadImage(doc.data()).then(res => {
                return res
            })
            buffData.push(getData);
        }
        download();
    })
    return buffData;
}

JSファイル（ファイルダウンロード）

export async function downloadImage(getData) {
    const imageURL = await storage.ref().child(getData.imageURl).getDownloadURL().catch(() => {
        alert("エラーが発生されました");
    });
    getData["downloadURL"] = imageURL;
    return getData;
}

結果

修正版

melheaven.hatenadiary.jp