Aurelia 如何在自定义组件的附加方法中进行异步工作

Question

这似乎是一个基本流程，但我找不到示例。

我有这个自定义组件，可以从后端服务加载项目列表。我尝试在下面编写此异步代码，但在 let.

的浏览器中出现 'Unexpected token' 错误

import {customElement, bindable, inject} from 'aurelia-framework';
import {ItemsService} from 'Services/ItemsService';

@customElement('itemslist')
export class ItemsList {

    static inject() { return [Element, ItemsService]; }

    constructor(element, itemsService) {
        this.element = element;
        this.itemsService = itemsService;
    }

    async attached() {
        let this.items = await this.itemsService.getItemList();
    }
}

我应该如何进行异步工作以加载项目并将其设置在我的视图模型上 items 属性?

谢谢

Answer 1

let关键字用于声明局部变量，在this之前不能使用。只需删除 let。在构造函数中或使用 ES7 语法声明您的 items 属性。

必须启用 Babel 的 async/await 转换器 - 更改 this:

config.js

  "babelOptions": {
    "optional": [
      "es7.decorators",
      "es7.classProperties"
    ]
  },

为此：

  "babelOptions": {
    "optional": [
      "es7.decorators",
      "es7.classProperties",
      "es7.asyncFunctions"
    ]
  },

或者这样：

  "babelOptions": {
    "stage": 0
    "optional": ["runtime"]
  },

Aurelia 如何在自定义组件的附加方法中进行异步工作

Aurelia how to do async work in attached method of custom component

asynchronous

aurelia