Jquery 异步/等待 ajax 调用

Question

我目前正在使用 3 个 ajax 调用方法（其中 3 个正在连续执行）。我必须在第二个 ajax 调用和第三个 ajax 调用之间有一个时间延迟。如果我在第二个ajax中添加“async:false”，一切都会像魅力一样工作。然而，我发现这确实是一种糟糕的做法，不应该使用。所以我决定尝试异步/等待。这是我第一次，所以运气不好。如果你们能添加一些解释以便我学习，我将非常感激。太感谢了。

//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) 。

Answer 1

1. Async/await需要函数返回一个承诺。
2. jQuery$.ajax()可以通过两种方式使用：回调和承诺。您的代码使用的是回调，而不是承诺。

包装$.ajax()在这样的函数中：

async function doAjax(url, params = {}, method = 'POST') {
    return $.ajax({
      url: url,
      type: method,
      dataType: 'json',
      data: params
    });
}

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! InsertAssignments:', error);
    $('#gridMessage').html(error.message).css('color', 'red');
  }
}