Javacript等待ajax,然后继续

时间:2019-07-31 11:17:07

标签: javascript jquery kendo-ui

当我用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等在网格中显示。 / p>

添加等待项也无济于事:

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

任何地方都将不胜感激。

3 个答案:

答案 0 :(得分:1)

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;
        }
      })
    ).done(function(a1, a2, a3) {
      // a1, a2, and a3 are arguments resolved for the each of the ajax requests, respectively.
      // Each argument is an array with the following structure:
      //[ data, statusText, jqXHR ]
      // here trigger the dataBound
    });
  }

答案 1 :(得分:1)

我相信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调用并且也执行了成功回调

答案 2 :(得分:-1)

添加。异步保存功能

save: async function (e) {}