async/awaitが正常に動作しない

Question

##概要
ユーザースクリプトとして、Chromeのデベロッパーツール上で実行する前提です。
コード内容は、Web上のTableからデータを取得し、API(GAS)を通してスプレッドシートで書き込む形になります。

##コード

async function testfunc(){
    var tables = $('table.mt-table:eq(0) > tbody > tr')
    $(tables).each((i,v)=>{
          var obj = JSON.parse($(v).attr('data-row-data'))
          var asin = obj.asin;
          var brand = 'hoge'
          var name = obj.title.slice(0,40)
          var postFrom = 'ユーザー1'
          var data = '{\"Name\":\"'+name+'\",\"Brand\":\"'+brand+'\",\"ASIN\":\"'+ asin + '\",\"From\":\"'+ postFrom + '\"}';
          var url = 'https://script.google.com/macros/s/hogehoge/exec';
          await fetch(url, { // Error
            method: 'POST',
            mode: "no-cors",
            headers: {
              'Accept': 'application/json'
            },
            body: data
          }).then((response) => {
            console.log(asin,'完了')
          })
    })
    }
    testfunc();

##抱えてる問題
eachループ内のfetchメソッドが非同期通信の為、全てのデータ送信前にコードが終了してしまい、全てのデータが送信されません。

そこで 下記のようにasyncとawaitを追加しましたが、「Uncaught SyntaxError: await is only valid in async function」をなってしまいます。

async function testfunc()
await fetch 

アドバイスお願い致します。

Answer 1

.eachはasync-awaitに対応していません。

• 1つずつ実行したい場合：forループで回す
• 並列に実行したい場合、Promise.all(Promiseの配列)とする

などの方法が考えられます。

Comments

[yuki_90453]

なるほど！ありがとうございます！やってみます。

Answer 2

jQueryに統一するか、逆に排除するかで改善されるかもしれません

Comments

[yambejp]

testfuncに指定したasyncはコールバックの中のawaitには
影響をあたえません

[yuki_90453]

> jQueryに統一するか、逆に排除するかで改善されるかもしれません
fetchの部分の事でしょうか？

[yambejp]

eachがコールバックを呼んでますよね？

[yuki_90453]

理解しました。教えてくれてありがとうございました。

[yambejp]

each的なものをfor構文にするサンプル

(async ()=>{
console.log("start");
for(var i=1;i<=3;i++){
await new Promise(resolve=>{
setTimeout(x=>{
resolve(x);
},1000,i);
}).then(res=>{
console.log(res);
});
}
console.log("end");
})();