Javascriptのawait/asyncのループ処理でハマったのでメモ。

深く考えず、というかこう書けばいいと勝手に思い込んでたが以下のコードだとawait axios.postが非同期で動いてしまう。

await this.appendix.map((blob) => {
    var config = {
        header: {
        "Content-Type": "multipart/form-data",
        },
    };
    try {
        var data = new FormData();
        data.append("file", blob);

        var res = await axios.post("/api/v1/upload/" + String(response.id) + "/" + item.id, data, config);
        console.log(res.data);
    } catch (error) {
        console.log(error);
    }
});

うーんなんで?ググってみると、どうやら古いプロトタイプ関数はモノによってawaitに対応していないかららしい。https://qiita.com/frameair/items/e7645066075666a13063

ループ内の処理を同期させたい場合は

for (let blob of this.appendix) {
    var config = {
        header: {
        "Content-Type": "multipart/form-data",
        },
    };
    try {
        var data = new FormData();
        data.append("file", blob);

        var res = await axios.post("/api/v1/upload/" + String(response.id) + "/" + item.id, data, config);
        console.log(res.data);
    } catch (error) {
        console.log(error);
    }
};

ループ内の処理は非同期だけど、ループが終わるまで待つ場合は

await Promise.all(this.appendix.map((blob) => {
    var config = {
        header: {
        "Content-Type": "multipart/form-data",
        },
    };
    try {
        var data = new FormData();
        data.append("file", blob);

        var res = await axios.post("/api/v1/upload/" + String(response.id) + "/" + item.id, data, config);
        console.log(res.data);
    } catch (error) {
        console.log(error);
    }
}));

と書くのが王道らしい。

参考
https://qiita.com/_takeshi_24/items/1403727efb3fd86f0bcd