async/awaitの使い方

Question

現在、非同期処理を使ってphpから値をreturnして変数に代入する処理を書いています。
しかし、どう改変しても
SyntaxError: await is only valid in async functions and the top level bodies of modules
このようなエラーが出るか、consoleがundefinedになってしまいます。
色々調べましたが、理解できません。
どこが間違っているのかご指摘いただきたいです。

async function f(){
    fetch("?action=toggle",{
        method:"POST",
        body:data
    })
    .then(response => {
        return response.json();
    })
    .then(json =>{
        return json;
    })
}

const list=await f();
console.log(list);

Answer 1

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

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

Answer 2

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

1. 関数 f() が何も返していないので、fetch が返したPromiseを返すように return を追加する。
2. await f() の実行は 非同期の関数の中で行うようにする。

以下は修正の一例です。

function f() {  // 追記2: async は不要
  return fetch("?action=toggle",{  // 1. fetch が返したPromiseを返すようにreturnを追加
      method: "POST",
      body: data
    })
    .then(response => {
      return response.json();
    })
    .then(json => {
      return json;
    })
}

(async () => {
  const list = await f();  // 2. await f() の実行は 非同期の関数の中で行うようにする
  console.log(list);
})();

追記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 は下記のように削除しています。

- async function f(){
+ function f(){

Answer 3

間違って回答欄に書いてしまいました。今さら削除依頼するのも何なので回答として書き直しました。　検証してないのでハズレだったらすみません。 検証しました。下の追記を見てください。

エラーメッセージでググってヒットした最初の記事 (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"
  }
]

上のスクリプトの実行結果は以下の画像のようになります。

Comments

[makun625]

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

Answer 4

f() の返り値がありません。return してください。

async function f(){
    return fetch("?action=toggle",{
        method:"POST",
        body:data
    })
    .then(response => {
        return response.json();
    })
    .then(json =>{
        return json;
    })
}

const list=await f();
console.log(list);

Comments

[退会済みユーザー]

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

[javahack]

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