Angular2中的Promise和Arrow函数

Question

I am new to angular and it may sound silly but I didn't get how this code works

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

I called the service method, on success what it returns ?

Secondly, how this arrow function got the array of heroes that my service has to return and then assigning the array to my component variable ,

My Component Code :

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

And here is the service :

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

It might be easier to understand if you look at how the TypeScript is transpiled to JavaScript (ES5).

Your TypeScript:

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

Transpiled to JavaScript:

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

The Promise .then() function accepts two callback functions, one for a success callback and one for an error callback. You're only using the success callback. Therefore, when .then() is executed on your Promise, if your Promise is successful, it will callback to your defined success function. Your defined success function then sets your service variable to the resolved result of your Promise.

Answer 2

当承诺解决后，它将返回heroeslist（即组件中的h1），然后起作用。