Jquery async/await ajax call

Question

我目前使用3个ajax调用方法(其中3个背靠背执行(。我必须在第二个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(数据(。

Answer 1

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

将$.ajax()包装成这样的函数：

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

然后在进行ajax调用时使用await doAjax()。

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');
}
}