for文で同期処理を行いたいときの注意点

Vueでループ処理を書く機会があり、非同期ではなく同期処理をしたい時に躓いたのでメモしておきます。

処理をループして行いたい時にforEachを利用すると１回目の処理の結果に関わらず非同期に処理が行われるため
オブジェクト内の処理が並列実行されてしまう
⇨この場合、前の処理の結果を参照して次の処理を行うことができない。

また、以下のようにforEach内にawait処理を行なっても失敗してしまう。

const func = async ()=>{
       const list = [1,2,3];
       list.forEach( index =>{ await sample(index); } );
};

同期処理、直列処理を行いたい場合はfor文,for-await-ofを利用する
以下のようにすることで一周目の処理の結果を待った後、次の処理は走らせることができます。

const func = async ()=>{
    const list = [1,2,3];
    for await ( const index of list ){
        function sample( index );
    }
};