Jquery асинхронный / ожидающий ajax вызов - PullRequest
Новая
       18

Jquery асинхронный / ожидающий ajax вызов

0 голосов
/ 22 февраля 2020

В настоящее время я использую 3 ajax методы вызова (3 из них выполняются вплотную). У меня должна быть задержка между вторым ajax звонком и третьим. Если я добавлю «asyn c: false» во второй ajax, все будет работать как шарм. Тем не менее, я обнаружил, что это действительно ужасная практика, которую не стоит использовать. Поэтому я решил попробовать async / await. Это мой первый раз, так что не повезло. Я был бы очень признателен, если бы вы, ребята, могли добавить некоторые объяснения, чтобы я мог учиться. Огромное спасибо. 

//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");
        }
    });
}

и затем я вызываю InsertAssignments (data) куда-нибудь.

1 Ответ

0 голосов
/ 22 февраля 2020

Async / await требует функции для возврата обещания. $.ajax() в вашем коде использует обратный вызов, а не обещание.

Оберните $.ajax() в такую ​​функцию: 

async function doAjax(url, params) {
  try {
    return await $.ajax( {
      url: url,
      type: 'POST',
      dataType: 'json',
      data: params
    });
  } catch (error) {
    console.log(error);
  }
}

Затем используйте await doAjax() всякий раз, когда вы делаете вызов ajax. 

 async function InsertAssignments(data) {
  const insertNewData = api + "/Point/insert_data/";

  try {
   // You can make multiple ajax calls
   // Response data is stored in result
   const result = await doAjax(insertNewData, data);
  } 

 catch(error) {
  console.log(error);
  $('#gridMessage').html(error.message).css("color", "red");
 }

}
...