title: How to use fetch with async/await?
body: <p>I start by saying that I am not 100% sure this is the problem, I mean using await and async.</p>
  
  <p>This is the scenario:</p>
  
  <p>I run this when I first load the page, and works fine, I get the <code>data</code>:</p>
  
  <pre><code>    externalContent(url);
  
      function externalContent(url) {
        fetch(url)
        .then(res =&gt; res.json())
        .then(data =&gt; {
          ...cool data...
        });
      }
  </code></pre>
  
  <p>But then I need to be able to click a button and re run that function with the <code>fetch</code></p>
  
  <p>So I do</p>
  
  <pre><code>    $(".alm-filters--button").on("click", function() {
        externalContent(url);
      }); 
  </code></pre>
  
  <p>But when I click, It gives me an error on  <code>.then(res =&gt; res.json())</code></p>
  
  <p>The error says: <strong><em>Uncaught (in promise) TypeError: Cannot read property 'then' of undefined</em></strong></p>
  
  <p>I believe there is an asynchronous issue, I tried, but I do not know enough about using async and await, yet I tried:</p>
  
  <pre><code>    async function externalContent(url) {
        await fetch(url)
        .then(res =&gt; res.json())
        .then(data =&gt; {
           ...cool data...
        });
      }
  </code></pre>
  
  <p>But et, I get the same error.</p>