title: Async functions in ajax calls
body: <p>When i request something to the web server via AJAX sometimes the response doesn't come in time for me to put the requested values in a select element:</p>
  <pre><code>// Fill fornecedor select with options
      async function getFornecedores(){
          $.ajax({
              type: 'GET',
              url: web_service_url + &quot;/TM_GetEnt?pEntTp=F&quot;,
              success: function (data) {
                  var xml_node = await $('DocumentElement',data);
                  var entnm = [];
                  await xml_node.find('Tabela&gt;ENTNM').each(function(){
                      entnm.push($(this).text());
                  });
                  await xml_node.find('Tabela&gt;ENTCD').each(function(index){
                      $(&quot;.fornecedor-select&quot;).append($(&quot;&lt;option&gt;&quot;).text(entnm[index]).val($(this).text()));
                  });
  
              },
              error: function(){
                  console.log( &quot;ERROR&quot;, arguments );
                  console.log(web_service_url);
                  alert(&quot;Erro&quot;);
              }
           });
       }
  
      // Fill tipo de documento with options
      /*async function getTipoDocumento(){*/
          $.ajax({
              type: 'GET',
              url: web_service_url + &quot;/TM_GetDocTpRecepcao&quot;,
              success: function (data) {
                  var xml_node = await $('DocumentElement',data);
                  var doctpds = [];
                  await xml_node.find('Tabela&gt;DOCTPDS').each(function(){
                      doctpds.push($(this).text());
                  });
                  await xml_node.find('Tabela&gt;DOCTPCD').each(function(index){
                      $(&quot;.documento-select&quot;).append($(&quot;&lt;option&gt;&quot;).text(doctpds[index]).val($(this).text()));
                  });
              },
              error: function(){
                  console.log( &quot;ERROR&quot;, arguments );
                  alert(&quot;Erro&quot;);
              }
           });
       /*}*/
  
       getFornecedores();
       /*getTipoDocumento();*/
  </code></pre>
  <p>I tried this in two ways. With an async function and without a function.
  I get the error: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
  Why is this giving me this error if I tried first with two async functions one for each select element? Isn't making it an async function enough for me to await something?</p>
  <p>If the async is not the answer to my problems than what is? I get a 500 internal server error. That's not very explicit...</p>