title: How do I make my code asynchronous ? (Google Chrome Extension)
body: <p>I'm developing a Google Chrome extension which collects data from two servers and sends it to another service. I don't understand how to make it asynchronous. The requests seem to work fine.</p>
  
  <p>I searched Google for some explanations but just found some basic tutorials with timeouts. Also, the Product-Server accepts the Ajax request, the Deal-Server doesn't (CORS Error). So I used XMLHttpRequest.</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function () {
  
      var createButton = document.getElementById("createButton");
      createButton.addEventListener("click", function () {
          getProducts();
          getDeals();
      }, false)
  
  
      function getProducts() {
          var list = [];
          chrome.tabs.getSelected(null, function (tab) {
              var Url = parseDealIdToUrl(tab.url)
                  $.get(Url, function (data, status) {
                      const jsonData = JSON.parse(JSON.stringify(data))
                      const productArray = jsonData.data
                      productArray.forEach(product =&gt; {
                          productList.push(new Product(product.id, product.deal_id, product.product_id, product.name, product.item_price, product.quantity, product.duration, product.discount_percentage, product.currency, product.sum, product.sum_formatted))
                      });
  
                  })
          });
      }
  
      function getDeals(maxPages = 1, currentPage = 1, akquises = []) {
          var akquiseList = akquises;
  
          if (currentPage &lt;= maxPages) {
              var Url = dealUrl + currentPage
              var xhr = new XMLHttpRequest();
              xhr.open("GET", Url, true);
              xhr.setRequestHeader("Authorization", "Token token=")
              xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4) {
                      const akquiseArray = JSON.parse(xhr.responseText);
                      akquiseArray.forEach(akquise =&gt; {
                          akquiseList.push(new Akquise(akquise.name, akquise.id))
                      });
                      getDeals(handlePagination(xhr.getResponseHeader("Link")), currentPage + 1, akquiseList)
                  }
              }
              xhr.send();
          }
      }
  }, false)
  </code></pre>
  
  <p>I want to call both functions and wait till both Lists are filled, then send the Data to the Service. Any idea would help me!</p>