anchor.diff:    Because data services are invariably asynchronous, 
     we'll finish the chapter with a promise-based version of the data service.
   
  -  因为数据服务通常都是异步的，所以在本章的最后，我们会把它重构为基于Promise（即“承诺”，一种异步编程模式）的版本。
  +  因为数据服务通常都是异步的，所以在本章的最后，我们会把它重构为基于承诺（Promise，一种异步编程模式）的版本。
   :marked
     [Run the live example for part 4](/resources/live-examples/toh-4/ts/plnkr.html)
     
  
positive.code:   
    We pause to think. We can call the service and get the data in one line.
    
    停下来想一想。在同一行中，我们调用了服务并且获得了数据。
  +makeExample('toh-4/ts/app/app.component.1.ts', 'get-heroes')(format=".")
  :marked
    We don't really need a dedicated method to wrap one line.  We write it anyway:
  +makeExample('toh-4/ts/app/app.component.1.ts', 'getHeroes', 'app.component.ts (getHeroes)')(format=".")
  
  <a id="oninit"></a>
  :marked
    ### The *ngOnInit* Lifecycle Hook
    `AppComponent` should fetch and display heroes without a fuss.
    Where do we call the `getHeroes` method? In a constructor? We do *not*!
    
    Years of experience and bitter tears have taught us to keep complex logic out of the constructor,
    especially anything that might call a server as a data access method is sure to do.
    
    The constructor is for simple initializations like wiring constructor parameters to properties.
    It's not for heavy lifting. We should be able to create a component in a test and not worry that it 
    might do real work &mdash; like calling a server!  &mdash; before we tell it to do so.
    
    If not the constructor, something has to call `getHeroes`.
    
    Angular will call it if we implement the Angular **ngOnInit** *Lifecycle Hook*.
    Angular offers a number of interfaces for tapping into critical moments in the component lifecycle:
    at creation, after each change, and at its eventual destruction.
    
    Each interface has a single method. When the component implements that method, Angular calls it at the appropriate time.
  .l-sub-section
    :marked
      Learn more about lifecycle hooks in the [Lifecycle Hooks](../guide/lifecycle-hooks.html) chapter.
  :marked
    Here's the essential outline for the `OnInit` interface:
  +makeExample('toh-4/ts/app/app.component.1.ts', 'on-init', 'app.component.ts (OnInit protocol)')(format=".")
  :marked
    We write an `ngOnInit` method with our initialization logic inside and leave it to Angular to call it
    at the right time. In our case, we initialize by calling `getHeroes`.
  +makeExample('toh-4/ts/app/app.component.1.ts', 'ng-on-init', 'app.component.ts (OnInit protocol)')(format=".")
  :marked
    Our application should be running as expected, showing a list of heroes and a hero detail view
    when we click on a hero name.
    
    We're getting closer. But something isn't quite right.
  
    ## Async Services and Promises
    Our `HeroService` returns a list of mock heroes immediately. 
    Its `getHeroes` signature is synchronous
  +makeExample('toh-4/ts/app/app.component.1.ts', 'get-heroes')(format=".")
  :marked
    Ask for heroes and they are there in the returned result.
     
    Someday we're going to get heroes from a remote server. We don’t call http yet, but we aspire to in later chapters.
    
    When we do, we'll have to wait for the server to respond and we won't be able to block the UI while we wait, 
    even if we want to (which we shouldn't) because the browser won't block.
    
    We'll have to use some kind of asynchronous technique and that will change the signature of our `getHeroes` method.
    
    We'll use  *promises*.
    
    ### The Hero Service makes a promise  
  
    A **promise** is ... well it's a promise to call us back later when the results are ready. 
    We ask an asynchronous service to do some work and give it a callback function. 
    It does that work (somewhere) and eventually it calls our function with the results of the work or an error.
  .l-sub-section
    :marked
      We are simplifying. Learn about ES2015 Promises [here](http://exploringjs.com/es6/ch_promises.html) and elsewhere on the web.
  :marked
    Update the `HeroService` with this promise-returning `getHeroes` method:
  +makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'hero.service.ts (getHeroes)')(format=".")
  :marked
    We're still mocking the data. We're simulating the behavior of an ultra-fast, zero-latency server,
    by returning an **immediately resolved promise** with our mock heroes as the result.
    
    ### Act on the Promise
    Returning to the `AppComponent` and its `getHeroes` method, we see that it still looks like this:
  +makeExample('toh-4/ts/app/app.component.1.ts', 'getHeroes', 'app.component.ts (getHeroes - old)')(format=".")
  :marked
    As a result of our change to `HeroService`, we're now setting `this.heroes` to a promise rather than an array of heroes. 
    
    We have to change our implementation to *act on the promise when it resolves*.
    When the promise resolves successfully, *then* we will have heroes to display.
    
    We pass our callback function as an argument to the promise's **then** method:
  +makeExample('toh-4/ts/app/app.component.ts', 'get-heroes', 'app.component.ts (getHeroes - revised)')(format=".")
  .l-sub-section
    :marked
      The [ES2015 arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
      in the callback is more succinct than the equivalent function expression and gracefully handles *this*.
  :marked
    Our callback sets the component's `heroes` property to the array of heroes returned by the service. That's all there is to it!
    
    Our app should still be running, still showing a list of heroes, and still
    responding to a name selection with a detail view.
  .l-sub-section
    :marked
      Checkout the "[Take it slow](#slow)" appendix to see what the app might be like with a poor connection.
  :marked
    ### Review the App Structure
    Let’s verify that we have the following structure after all of our good refactoring in this chapter:
  
  .filetree
    .file angular2-tour-of-heroes
  
negative.code:     .file typings.json
  :marked
    Here are the code files we discussed in this chapter.
    
    这就是我们在本章讨论过的这些源码文件：
  
  +makeTabs(`
    toh-4/ts/app/hero.service.ts,
  