title: Jquery async/await ajax call
body: <p>I'm currently using 3 ajax call methods (3 of them are executing back-to-back). I must have a time delay in between the second ajax call and the third one. If I add "async:false" in the second ajax, everything works like a charm. However, I found out that this is really a terrible practice and shouldn't be using. 
  So I decided to try an async/await. This is my first time, so have no luck. I would be really grateful if you guys could add some explanations so I can learn. Thank you so much. </p>
  
  <pre><code>//This is the second ajax method that I've been trying to use async/await
  async function InsertAssignments(data) {
      var insertNewData = api + "/Point/insert_data/";
      await $.ajax({
          type: "POST",
          url: insertNewData + data,
          dataType: "json",
          data: data,
          timeout: 30000,
          success: function (data) {
              $("#mainGrid").data("kendoGrid").dataSource.read();
              $("#ListBox1").data("kendoListBox").dataSource.read();
              $("#ListBox2").data("kendoListBox").dataSource.read();
          },
          error: function (xhr, status, error) {
              $('#gridMessage').html(xhr.responseText).css("color", "red");
          }
      });
  }
  </code></pre>
  
  <p>and then I'm calling InsertAssignments(data) somewhere.</p>