React for文に対する非同期処理

最近忙しいことを理由にブログ更新ができていませんでした。。。

前回まで実施していたポケモンチャート表示。完成しました！！
完成したWebアプリはこちらになります。
https://elsammit.github.io/PokeChart/.

このポケモンチャートですが、ちょっと冗長だった部分があったので修正してみました。
そこで、for文を使って各パラメータを設定してみたのですが、実行時に実行順序がおかしくなってしまいました泣。

理由はいつも躓く非同期処理！！

で、いつものようにpromise / thenを用いたのですがうまくいかず。。。
ちょっと調べたりして時間がかかった部分だったのでまとめておこうと思います！！

■for文の非同期処理
for文で非同期処理を行うには、async /awaitを用いるとよさげ。
ただ今回はアロー関数用いているんだよな。。。と困り果てていたところ、こちらの記事を発見！！
JavaScriptでループの中で非同期処理を書く - Qiita

こちらの記事を用いてこちらのように、for文内で実行する処理をasync / awaitを行ったところ、
上手く同期処理行うことができました👍

SettingParam = () =>{
    return new Promise((resolve, reject) =>{
        var Param = ["HP", "Atk", "Def", "SP", "B", "C"];
    
        // 即時関数を用いてasyncで定義してawaitで非同期処理を実行.
        (async () => {
            for(var i=0;i<Param.length;i++){
                await this.CalcParam(Param[i], i); ←ここに実行したい関数を 「await 関数名」の形で入れる.
            }
        })().catch(error => console.error(error));

        resolve();
    })
}

■最後に
お盆中に終わらせようと思っていた作業が気づけば1週間遅れ。。。
忙しいことを理由にしてやらないのはよくないですね。反省です。

以降は最近流行り？のノーコードに触れてみようかな？と思っています。

ポケモンレーダーチャート(react版)ソースコードはこちらに格納しました。
https://github.com/Elsammit/PokeChart.git

■参考
JavaScriptでループの中で非同期処理を書く - Qiita
JavaScriptの非同期処理をアロー関数を使わない方法で考える - Qiita