Angular2 中的 Promise 和箭头函数

Question

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

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

我调用了服务方法，成功了会怎样return？

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

我的组件代码：

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

当 promise 解析时..它返回英雄列表，它是组件中的 h1 然后函数。

Answer 2

如果您查看 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成功，它会回调到你定义的success函数。然后，您定义的成功函数将您的服务变量设置为您的 Promise 的解析结果。

Angular2 中的 Promise 和箭头函数

Promise and Arrow Function in Angular2

promise

angular-promise

angular