[Angular 2] Async Http

Async Pipe:

The Asynce pipe receive a Promise or Observable as  input and subscribes to the input, evetually emitting the value(s) changes arrive.

In the demo, the logic is fom the list component, we ask service to get Heros by calling Start War API, on the service side, we only return array of heros with observalbe type:

    getHeros(){
        return this._http.get(‘http://swapi.co/api/people‘)
            .map( (res: Response) => <Hero[]>res.json().results)
            .catch(this.handleError);
    }

 ...

export class Hero{
    constructor(public name: string){}
}

Here <Hero[]>, we use Typescript to convert the raw json data to Hero[]. The same as you new Hero().

For the list, we assign the return value from service to this.heros , so it is a list of Hero with Observable type, then we apply async pipe to the html.

    heros: Observable<Hero[]>;

    getHeros(){
        this.heros = this.heroService.getHeros();
    }
        <ul>
            <li *ngFor="#hero of heros | async">
                {{hero.name}}
            </li>
        </ul>
时间: 2024-10-14 08:19:45

[Angular 2] Async Http的相关文章

[Angular] New async &#39;as&#39; syntax and ngIf.. else

From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' instead of subscribe to observable. We also able to use 'else' with '*ngIf', else taks a 'template' which will be displayed when the if expression is

[Angular] Bind async requests in your Angular template with the async pipe and the &quot;as&quot; keyword

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple par

[Angular 2] Handle Reactive Async opreations in Service

When you use ngrx/store and you want to fire a service request. When it sucessfully return the response, you need to dispatch action to tell the store update. So one pattern can be considered to follow is: import {Http, Headers} from '@angular/http';

[Angular 2] Rendering an Observable with the Async Pipe

Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular 2 and then to render it out in the template. import {Component} from 'angular2/core'; import {boo

[Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the else block of the *ngIf directive to show a simpl

[Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream

[Angular 2] Passing Observables into Components with Async Pipe

The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a

[Angular 2] Rendering an Observable Date with the Async and Date Pipes

Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual Dates. We'll still use the Async pipe, but we'll also add on the Date pipe with some formatting to display the Date just the way we want it. import {C

[Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE

Link to the artical. Zone detects any async opreations. Once an async oprations happens in Angular, Zone will notify change detection to kick in. Images we have 5000 svg box displaying on the screen. And each svg elements and three event listener on