在 UI5 中将 async/await 用于基于承诺的 API

Question

官方 UI5 文档 proposes 使用 promises 加载 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();

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

Answer 1

重构非常简单，您还需要做的就是将调用它的方法标记为 async，这实际上是您需要进行的唯一更改。

如果您不通过像 Babel 这样的工具 运行 您的代码库，您将遇到的最大潜在问题是 browser support。最大的障碍是 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 (since 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 将被应用。*

---

* IE11 is no longer supported since UI5 1.88. 从那时起polyfill也被删除了。