title: How to wait fetch api to finish using async/await?
body: <p>I have this Javascript program that will load images from my local server to datatransfer, then assign its files to my input with type file, but I really don't have an idea on how to wait for the fetch API to finish before executing the later part of the program. I'm hoping you can help me with my problem because I'm a beginner.
        </p>
  <pre><code>function image_select(BHID) {
      all_fileBuffer[BHID] = new DataTransfer();
       //add images from database to filebuffer
      setTimeout(async function () {
      $(&quot;div#container-&quot;+BHID+&quot; img&quot;).each(async function (e) {
          await fetch($(this).attr('src'))
              .then(res =&gt; res.blob())
              .then(blob =&gt; {
                  all_fileBuffer[BHID].items.add(new File([blob], $(this).attr('id'), blob));
              })
          
      }); 
      }, 1000);
  
      all_attachments[BHID] = document.getElementById(&quot;image-&quot; + BHID).files; // &lt;-- reference your file input here
  
      // append the file list to an array iteratively
      for (let i = 0; i &lt; all_attachments[BHID].length; i++) {
          // Exclude file in specified index
          all_fileBuffer[BHID].items.add(all_attachments[BHID][i]);
      }
      document.getElementById('image-' + BHID).files = all_fileBuffer[BHID].files;
      all_image[BHID] = document.getElementById('image-' + BHID).files;
  
      all_images[BHID] = [];
      for (i = 0; i &lt; all_image[BHID].length; i++) {
          all_images[BHID].push({
              &quot;name&quot;: all_image[BHID][i].name,
              &quot;url&quot;: URL.createObjectURL(all_image[BHID][i]),
              &quot;file&quot;: all_image[BHID][i],
          })
      }
      document.getElementById('container-' + BHID).innerHTML = &quot;&quot;;
      document.getElementById('container-' + BHID).innerHTML = image_show(BHID);
              
  
  console.log(all_fileBuffer[BHID].files); 
  }
  </code></pre>