在 UI5 中对基于 promise 的 API 使用 async/await

Question

官方 UI5 文档建议加载一个Fragmentusing promises：

Fragment.load({

    controller: oFragmentController,

        id: oView.getId(),

        name: "webapp.view.HelloDialog"

    }).then((oDialog) => {

    oView.addDependent(oDialog);

    oDialog.open();

});

我个人更愿意使用async/await代替：

const oDialog = await Fragment.load({

    controller: oFragmentController,

    id: oView.getId(),

    name: "webapp.view.HelloDialog"

});

oView.addDependent(oDialog);

oDialog.open();

.then这样的代码重构和从-promises 到UI5 中的async/ 的转换将如何保存？await它会导致一些问题吗？

Answer 1

您可以在 UI5 中安全地使用async‑，await因为它基本上是 Promise 的语法糖。<Dialog id="helloDialog">在片段定义中给出，并且this作为当前控制器实例，创建片段将如下所示：与this.loadFragment（自 UI5 1.93 起）onOpenDialog: async function() {  const dialog = this.byId("helloDialog") || await this.loadFragment({    name: "webapp.view.HelloDialog"  });  dialog.open();},与Fragment.load（自 UI5 1.58 起）// Fragment required from "sap/ui/core/Fragment"onOpenDialog: async function() {  let dialog = this.byId("helloDialog");  if (!dialog) {    dialog = await Fragment.load({      id: this.getView().getId(),      name: "webapp.view.HelloDialog",      controller: this,    });    this.getView().addDependent(dialog);  }  dialog.open();},旧工厂功能sap.ui.xmlfragment已弃用并*.fragment.xml同步获取文件。话虽如此，如果该应用程序针对 IE11，则应避免使用async‑ 。await Promiseor -able 函数只能在 IE11 中工作，因为 UI5 附带了一个 polyfill，如果尚未原生支持或完全支持，then则会应用该 polyfill 。*Promise

Answer 2

重构非常简单，您还需要做的就是将调用它的方法标记为 as async，这实际上是您需要进行的唯一更改。如果你不通过像 Babel 这样的工具运行你的代码库，你将遇到的最大的潜在问题是浏览器支持。最大的障碍是 IE 11，许多企业客户仍在使用它。onFragmentLoad: async function(oEvent) {  const oDialog = await Fragment.load({    controller: this,    id: this.getView().getId(),    name: "webapp.view.HelloDialog"  });  this.getView().addDependent(oDialog);}