質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

解決済

4回答

972閲覧

async/awaitの使い方

makun625

総合スコア27

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

2クリップ

投稿2022/08/26 16:31

現在、非同期処理を使って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ページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

SyntaxError: await is only valid in async functions and the top level bodies of modules
このようなエラーが出るか

エラーメッセージのとおりです。awaitasync関数の中にしか書けません。

投稿2022/08/26 22:35

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

修正すべき点は以下の2点です。

  1. 関数 f() が何も返していないので、fetch が返したPromiseを返すように return を追加する。
  2. 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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

makun625

2022/08/27 15:53

実行したい処理ができました。ありがとうございます!! 非同期って難しいですね…
guest

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

arcxor

総合スコア2859

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/08/26 22:13

上の回答のコードは質問者さんのコードと同じに見えますけど? 「return してください」とはどういうことですか?
javahack

2022/08/26 23:51

2行目、fetch の前に return が挿入されてますね。 他の回答を見るとそれだけではダメそうですが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問