Angular2中的承诺和箭头函数

Question

我是 Angular 新手，听起来可能很傻，但我不明白这段代码是如何工作的

this.ms.getList().then((hl) => { this.HeroesList = hl; });

我调用了服务方法，成功后返回什么？

其次，这个箭头函数如何获取我的服务必须返回的英雄数组，然后将数组分配给我的组件变量，

我的组件代码：

constructor(private ms: myService) {
  }
  ngOnInit() {
    this.ms.getList().then((hl) => { this.HeroesList = hl; });
  }

这里是服务：

import { Injectable } from '@angular/core'
import { Hero } from './hero'
import { HeroesList } from './heroesList'
@Injectable()
export class myService {
    heroes: Hero[];
    getList(): Promise<Hero[]> {
        return Promise.resolve(HeroesList);//when success, return the list 
    }

}

Answer 1

如果你看一下 TypeScript 是如何转译成 JavaScript (ES5) 的，可能会更容易理解。

你的打字稿：

this.ms.getList().then((hl) => { this.HeroesList = hl; });

转译为 JavaScript：

this.ms.getList().then(function(hl) { 
    this.HeroesList = hl; 
});

Promise .then() 函数接受两个回调函数，一个用于成功回调，一个用于错误回调。您只使用成功回调。因此，当 .then() 在你的 Promise 上执行时，如果你的 Promise 成功，它会回调你定义的成功函数。然后，您定义的成功函数将您的服务变量设置为您的 Promise 的已解决结果。

Answer 2

当 promise 解决时.. 它返回 herolist，它是组件中的 h1 然后函数。