在 UI5 中为基于 Promise 的 API 使用 async/await

Question

官方 UI5 文档建议使用 promise 加载Fragment ：

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到async / await在UI5？ 它会导致一些问题吗？

Answer 1

重构非常简单，此外您需要做的就是将调用它的方法标记为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);
}

Answer 2

您可以安全地在 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 。 Promise或then -able 函数仅在 IE11 中工作，因为 UI5 附带了一个 polyfill，如果Promise尚未被原生或完全支持，则会应用该 polyfill。 *

---

*自 UI5 1.88 起不再支持 IE11。 从那时起，polyfill 也被移除了。