非同期通信におけるParsing error: Can not use keyword ‘await’ outside an async functionエラーについて

asyncプロパティは、ある関数に「async」と追加することで、そのリクエストの返り値を

promiseオブジェクトとして返すことができます。

asyncの中で使えるawaitプロパティは、asyncで非同期関数とした関数の中のレスポンスから

成功時と失敗時の処理を分けて受け取ることができます。

async-awaitというのはそれぞれ対になっており、asyncとして非同期関数として明記した場合は

「then」として受け取るために必ずawaitを明記しないといけません。

//同じ関数内

async componentDidMount()

result = (await sampleService.getSample().data;

非同期データの受け取りをサポートする両者ですが、新しくapiリクエストを作って動かしてみると

以下のようなエラーが出ました。

Parsing error: Can not use keyword ‘await’ outside an async function

awaitを使う場合は、関数名の先頭に書くのですが、今回はcomponentDidMountにasyncを追加

しているので入力忘れ・タイプミスしてるというのは除外されました。

関数に明記はしてあるのに・・・おかしいと思ったところ、その後にもう一回関数を使っている

ことに気付きました。

navigator.geolocation.getCurrentPosition(function(position) {
result = (await sampleService.getSample().data;
}

一行目、functionって書いてあった、つまり君も関数か！？

一行目のfunctionですが、この中で関数定義しているので、ここにasyncをつけないと動かない

ことが判りました。この場合は大元のasyncではダメなんですね・・・。

謎が解けた。この際なあなあになっていた非同期通信の詳細にも目を通していこうと思います。