在 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);

}