☰

async/await で fetch を使用するにはどうすればいいですか? [closed] 質問する

tag-icon • tag-icon javascript ecmascript-6 async-await
async/await で fetch を使用するにはどうすればいいですか? [closed] 質問する

まず、これが問題であるかどうかは 100% 確信が持てません。つまり、await と async を使用しているということです。

シナリオは次のとおりです。

最初にページをロードするときにこれを実行すると、正常に動作し、次のようになりますdata。

    externalContent(url);

    function externalContent(url) {
      fetch(url)
      .then(res => res.json())
      .then(data => {
        ...cool data...
      });
    }

しかし、ボタンをクリックしてその関数を再実行できるようにする必要があります。fetch

私もです

    $(".alm-filters--button").on("click", function() {
      externalContent(url);
    });

しかし、クリックするとエラーが発生します.then(res => res.json())

エラーには次のように書かれています:キャッチされない (promise 内) TypeError: undefined のプロパティ 'then' を読み取ることができません

非同期の問題があると思いますが、試してみましたが、async と await の使用については十分に理解していません。それでも試してみました:

    async function externalContent(url) {
      await fetch(url)
      .then(res => res.json())
      .then(data => {
         ...cool data...
      });
    }

しかし、同じエラーが発生します。

ベストアンサー1

参照この記事問題は解決するはずです。スニペットも参照してください。

async function exampleFetch() {
    const response = await fetch('https://reqres.in/api/users/2');
    const json = await response.json();
    console.log(json);
}

exampleFetch()

awaitは の代わりとなる.then()ので、 を使用する場合は をまったくawait fetch使用する必要はありません。.then()

ほぼ同じ問題を扱った他の回答をいくつか紹介します。

1 -非同期フェッチ関数の値にアクセスするにはどうすればいいですか? [重複]

2 -Async/Await を使用した Fetch API の戻り値が予期しない [重複]

おすすめ記事