服务器请求期间未显示忙碌对话框答案

【问题标题】：Busy Dialog not showing during server requests服务器请求期间未显示忙碌对话框
【发布时间】：2014-03-06 12:43:30
【问题描述】：

我正在开发一个 UI5 应用程序。我想在 ajax 请求期间阻止 UI 表单用户。我添加了以下代码：

var dialog = new sap.m.BusyDialog({
  text: this.languageModel.getModelProperty("BUSY_DIALOG_FETCHING_DATA"),
  title : this.languageModel.getModelProperty("BUSY_DIALOG_WAIT")
});
var that = this;
jQuery.ajaxSetup({
  beforeSend: function() {
    dialog = (dialog) ? dialog : new sap.m.BusyDialog({
      text : that.languageModel.getModelProperty("BUSY_DIALOG_FETCHING_DATA"),
      title : that.languageModel.getModelProperty("BUSY_DIALOG_WAIT")
    });
    dialog.open();
  },
  complete: function() {
    console.log("close");
    dialog.close();
  }
});

在控制台中，我得到了很好的结果，并且在调试时我可以看到对话框，但是在正常模式下（没有任何断点），忙碌的对话框根本不会出现。有什么线索吗？

【问题讨论】：

这是由于同步请求：stackoverflow.com/a/61573982/5846045。给浏览器时间来更新 DOM

标签： javascript jquery ajax xmlhttprequest sapui5

【解决方案1】：

为什么不使用忙碌指示符？

var oController = this;
oController.getView().setBusy(true);
$.ajax({
    //your ajax call here, 
    success: function(data) {
        //do whatever needs to be done after success;
        oController.getView().setBusy(false);
    },
    error: function(...) {
        oController.getView().setBusy(false);
    }
});

【讨论】：

【解决方案2】：

您可能正在同步发送一些请求，因此浏览器在尝试打开对话框时无法更新 DOM^[1]。

调用低级API时（如jQuery.ajax()）：
- 从不设置async: false。
- 切勿致电 jQuery.sap.sjax，因为它仅发送同步 XHR 已被弃用。
迁移到异步 API。遵循以下提到的最佳实践：
- Is Your Application Ready for Asynchronous Loading?
- Use Asynchronous Loading
- 如果是 OData：请勿使用已弃用 sap.ui.model.odata.ODataModel!默认情况下，它会发送许多带有同步 XHR 的请求。根据 OData 服务考虑使用v2.ODataModel 或v4.ODataModel。

^{[1] 同步发送请求阻塞主-线程（同时也是UI-线程）导致不良用户体验的浏览器。也是网络平台deprecated。}

【讨论】：