时间戳

首页 > 解决方案 > JavaScript 在继续之前等待 AJAX

javascript - JavaScript 在继续之前等待 AJAX

问题描述

在使用 kendo ui 进行内联网格编辑时单击更新时出现竞争情况。

在保存时，我在保存时执行以下功能：

dataBound: function (e) {
   // This needs to run after the save has finished           
},
save: function (e) {
    $.when(
        $.ajax({
            type: "GET",
            url: "/Admin/OperatingCentre/GetById?id=" + e.model.OperatingCentreId,
            success: function (data) {
                e.model.OperatingCentreName = data.Name;
            }
        }),
        $.ajax({
            type: "GET",
            url: "/Admin/Division/GetById?id=" + e.model.DivisionId,
            success: function (data) {
                e.model.DivisionName = data.Name;
            }
        }),
        $.ajax({
            type: "GET",
            url: "/Admin/OperatingCompany/GetById?id=" + e.model.OperatingCompanyId,
            success: function (data) {
                e.model.OperatingCompanyName = data.Name;
            }
        })
   );
}

我要等待 $.when 函数，因为网格不会等到它调用数据绑定，因此 e.model.OperatingCentreName 等没有及时设置以显示在网格中。

添加 await 这也无济于事：

save: async function (e) {
    await $.when(

任何建议将不胜感激。

标签： javascriptjquerykendo-ui

解决方案

我相信这async/await应该可以解决您的问题

save: async function (e) {

    await $.ajax({
        type: "GET",
        url: "/Admin/OperatingCentre/GetById?id=" + e.model.OperatingCentreId,
        success: function (data) {
            e.model.OperatingCentreName = data.Name;
        }
    }),
    await $.ajax({
        type: "GET",
        url: "/Admin/Division/GetById?id=" + e.model.DivisionId,
        success: function (data) {
            e.model.DivisionName = data.Name;
        }
    }),
    await $.ajax({
        type: "GET",
        url: "/Admin/OperatingCompany/GetById?id=" + e.model.OperatingCompanyId,
        success: function (data) {
            e.model.OperatingCompanyName = data.Name;
        }
    })}

通过这种方式，您将阻止脚本的执行，直到执行 ajax 调用并执行成功回调

推荐阅读