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

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

在 UI5 中，这样的代码重构和从

.then

-promises 到

async

/

await

的转换如何节省？它会导致一些问题吗？

Answer 1

您可以安全地在UI5中使用

async

‑

await

，因为它基本上是Promise的语法糖目前有一些限制。*

给定片段定义中的

<Dialog id="helloDialog">

，并且 

this

 是当前控制器实例，创建片段将如下所示：

与

this.loadFragment

（自 UI5 1.93 起）

// this === Controller instance
onOpenDialog: async function() {
  const dialog = this.byId("helloDialog") || await this.loadFragment({
    name: "webapp.view.HelloDialog"
  });
  dialog.open();
},

与

Fragment.load

（自 UI5 1.58 起）

// this === Controller instance
// Fragment required from "sap/ui/core/Fragment"
onOpenDialog: async function() {
  let dialog = this.byId("helloDialog");
  if (!dialog) {
    dialog = await this.getOwnerComponent().runAsOwner(() => Fragment.load({
      id: this.getView().getId(),
      name: "webapp.view.HelloDialog",
      controller: this,
    }));
    this.getView().addDependent(dialog);
  }
  dialog.open();
},

旧工厂函数

sap.ui.xmlfragment

已弃用，并同步获取

*.fragment.xml

文件。

话虽这么说，

如果应用程序的目标是废弃的浏览器，例如 Internet Explorer，则应完全避免使用 async

‑

await

。

Promise

 或 

then

 功能只能在 IE11 中工作，因为 UI5 附带了如果 

Promise

 尚未原生或完全支持，则应用填充。 

**

---

* ... if 该项目基于 UI5 Tooling。请参阅 UI5 中主题 ECMAScript 支持中新引入的部分“异步工厂函数”和“事件处理程序注册”。

** 不再支持 IE11。 Polyfill 也相应删除。

Answer 2

重构非常简单，您需要做的就是将调用它的方法标记为

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