Javascript 如何将fetch与async/await一起使用？

我首先说，我不是100%确定这是问题所在，我的意思是使用wait和async

这是一个场景：

当我第一次加载页面时，我运行了这个程序，工作正常，我得到了

数据

：

    externalContent(url);

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

但我需要能够单击一个按钮，然后使用

fetch

我也是

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

但是当我单击时，它在

上给我一个错误。然后（res=>res.json（））

错误为：Uncaught（in promise）TypeError:无法读取未定义的属性“then”

我相信存在异步问题，我尝试过，但我对使用async和await了解不够，但我尝试过：

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

但是et，我也有同样的错误。

引用应该会解决您的问题。请参阅代码片段

异步函数exampleFetch（）{
const response=等待获取（'https://reqres.in/api/users/2');
const json=await response.json（）；
log（json）；
}
exampleFetch（）

我用注释更新了答案以澄清问题。

const-json

应该与您所称的

data

@dvlsg具有相同的值—确切地说，它不起作用，即使他发布的文章也这么说！您需要在异步函数中使用wait将其转换为代码段，请立即查看。是的，以前有一行错误。

[…]当使用wait-fetch时，您不应该同时使用。then（）[…]

这不是真的，在某些情况下，您仍然希望使用

。then

，因为它允许避免使用中间变量。所以

let data=await fetch（url）。然后（res=>res.json（））

就很好了。我觉得最初的示例并没有错——事实上，当我将它粘贴到我的chrome控制台时，它就起作用了（或者至少给出了我预期的CORS错误）。您确定这些行是错误的来源吗？能否在

获取

的末尾添加一个

.catch（console.error）

？是否捕获到任何错误？您真的确定错误发生在

fetch（url）。然后（res=>res.json（））

而不是代码的另一部分吗？@t.niese不确定，但控制台给了我这一行，我认为代码似乎很好。在承诺的末尾添加catch，看看是否有错误。如果它确实发生在那一行，那么这表示您用另一个函数覆盖了

fetch

函数，因为

fetch（url）。然后（res=>res.json（））

不会导致该错误，如果

fetch

指的是浏览器的fetch API。但我猜问题发生在其他地方。