現在、非同期処理を使ってphpから値をreturnして変数に代入する処理を書いています。
しかし、どう改変しても
SyntaxError: await is only valid in async functions and the top level bodies of modules
このようなエラーが出るか、consoleがundefinedになってしまいます。
色々調べましたが、理解できません。
どこが間違っているのかご指摘いただきたいです。
javascript
1async function f(){ 2 fetch("?action=toggle",{ 3 method:"POST", 4 body:data 5 }) 6 .then(response => { 7 return response.json(); 8 }) 9 .then(json =>{ 10 return json; 11 }) 12} 13 14const list=await f(); 15console.log(list);
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答4件
1
SyntaxError: await is only valid in async functions and the top level bodies of modules
このようなエラーが出るか
エラーメッセージのとおりです。await
はasync
関数の中にしか書けません。
投稿2022/08/26 22:35
総合スコア144192
0
修正すべき点は以下の2点です。
- 関数
f()
が何も返していないので、fetch が返したPromiseを返すようにreturn
を追加する。 await f()
の実行は 非同期の関数の中で行うようにする。
以下は修正の一例です。
javascript
1function f() { // 追記2: async は不要 2 return fetch("?action=toggle",{ // 1. fetch が返したPromiseを返すようにreturnを追加 3 method: "POST", 4 body: data 5 }) 6 .then(response => { 7 return response.json(); 8 }) 9 .then(json => { 10 return json; 11 }) 12} 13 14(async () => { 15 const list = await f(); // 2. await f() の実行は 非同期の関数の中で行うようにする 16 console.log(list); 17})();
追記1
- SyntaxError: await is only valid in async functions and the top level bodies of modules のエラーを解消するだけなら、上記の修正点の 2. だけ修正することで当該のエラーは出なくなると思います。ただし1. の修正をしないと、
f()
は undefined で即時解決するPromiseを返すことになり、従ってconst list = await f();
によってlist
にはundefinedが入ってしまうので、fetchで得たレスポンスをlist
に入れるという意図した結果は得られないです。
追記2
お伝えし忘れた点が一点ありました。
上記で回答した2点の修正のうち、 1. のほうの修正は、すでにコード例に書いたように fetch()
の返したPromiseを f()
に returnさせるようにしますが、これに加えて関数f()
の宣言における async
は不要になります。
先のコード例でも function f()
の前の async
は下記のように削除しています。
diff
1- async function f(){ 2+ function f(){
投稿2022/08/27 03:22
編集2022/08/27 04:35
退会済みユーザー
総合スコア0
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
0
ベストアンサー
間違って回答欄に書いてしまいました。今さら削除依頼するのも何なので回答として書き直しました。 検証してないのでハズレだったらすみません。 検証しました。下の追記を見てください。
エラーメッセージでググってヒットした最初の記事 (url 下記) によると、async /
await をペアで使わないとそうなるそうです。
Fix - Await is only valid in async function Error in NodeJS
https://bobbyhadz.com/blog/node-await-is-only-valid-in-async-function#:~:text=The%20error%20%22await%20is%20only,directly%20enclosing%20function%20as%20async%20.
質問のコードでは関数に async を付与したが、関数内では await を使ってないのが問題のようです。
関数の内部で await を使うように関数内の構文を書き直すか、今のままのコードから async / await を削除したらどうなりますか?
【追記】
上に「関数の内部で await を使うように関数内の構文を書き直すか、今のままのコードから async / await を削除したらどうなりますか?」と書きましたが、それを検証してみました。
以下のコードの getData() が「async / await を削除」、getData2() が「関数の内部で await を使うように関数内の構文を書き直す」です。
<script type="text/javascript"> function getData() { fetch("handler2.ashx", { method: "POST" }) .then(response => response.json()) .then(data => console.log(data)) } async function getData2() { const response = await fetch("handler2.ashx", { method: "POST" }); const data = await response.json(); console.log(data); } window.onload = async function () { getData(); await getData2(); } </script>
例えば fetch で要求すると戻ってくる JSON 文字列が以下の場合、
[ { "id": 1, "name": "aaa" }, { "id": 2, "name": "bbb" }, { "id": 3, "name": "ccc" } ]
上のスクリプトの実行結果は以下の画像のようになります。
投稿2022/08/26 22:12
編集2022/08/27 02:38
退会済みユーザー
総合スコア0
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント

0
f()
の返り値がありません。return
してください。
js
1async function f(){ 2 return fetch("?action=toggle",{ 3 method:"POST", 4 body:data 5 }) 6 .then(response => { 7 return response.json(); 8 }) 9 .then(json =>{ 10 return json; 11 }) 12} 13 14const list=await f(); 15console.log(list);
投稿2022/08/26 17:27
総合スコア2519
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
こちらの回答が複数のユーザーから「過去の低評価」という指摘を受けました。
回答へのコメント

退会済みユーザー
2022/08/26 22:13
2022/08/26 23:51

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
同じタグがついた質問を見る
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。