2017-05-09 70 views
-1

任何人都可以帮助我如何使用http请求上的Observable来处理成功,失败和拒绝情况?在组件如何使用angular2 Observable

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class MyService { 
    constructor(private _http: Http) { 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || "Server error"); 
    } 

    getMethod(): Observable<any> { 
     return this._http.get("yourGetUrl") 
      .map((response: any) => <any>response.json()) 
      .catch(this.handleError); 
    } 

} 

然后:

+1

https://angular.io/docs/ts/latest/guide/server-communication.html – echonax

+2

是什么标题有问题怎么办? – 2017-05-09 12:05:48

回答

1

创建服务

import { Component, OnInit, Injectable } from '@angular/core'; 
import { MyService } from '../../services/my.service'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.html', 
    styleUrls: ['my-component.css'], 
    moduleId: module.id, 
    providers: [MyService] 
}) 
export class MyComponent implements OnInit { 
    constructor(private _myService: MyService) { 
    } 

    ngOnInit() { 
     this._myService 
      .getMethod() 
      .subscribe(
       data => {//here is the data}, 
       error => {//here is the error} 
      ); 
    } 
} 
1

它应该像下面的代码:

在服务

import 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

public getData(): Observable<Type> { 
    return this.http.get(request) 
    .map(res:ResponseType => res.json()) //Success 
    .catch(err => console.log(err)); //failure 
} 

在组件:

getData().subscribe(
    data => console.log(data), 
    error => console.log(error) //reject 
);