title: Javascript: How to wait for fetch result before continuing
body: <p>This question may have been asked here before, and I'm sorry, but I wasn't able to find a solution to my problem anywhere. I am relatively new to JavaScript and things like <em>&quot;promises&quot;</em> are alien to me. I am trying to make a code that will load an array from a .JSON file, and after it loads, the code will continue.</p>
  <pre class="lang-js prettyprint-override"><code>async function fetchTags() {
      var response = await fetch('../json/tags.json');
      var json = await response.json();
      console.log(json); // returns: Array()
      return json;
  }
  
  function mainFunction() {
      let tags = fetchTags();
      console.log(tags); // returns: Promise { &lt;state&gt;: &quot;pending&quot; }
  }
  </code></pre>
  <p>This is what my current code looks like, using a not-working &quot;solution&quot; I found on the internet. While the <code>console.log(json)</code>, which is inside of the async function, returns the array correctly, the main function's <code>console.log(tags)</code> displays this promise with a &quot;pending&quot; state - and displays sooner than the array can be loaded, if I understand correctly.</p>
  <p>The following code of the <code>mainFunction()</code> however relies strongly on this array, and it should not proceed before the array is loaded. Where am I making a mistake?</p>
  <p>Thanks a lot for all your replies.</p>