Angular 2 / 4 toPromise 有效，但我在使用 Observables 时遇到问题

Question

我正在尝试围绕 Observables 进行思考

这是我目前使用.toPromise 的方法

request.ts

get(url): Promise<any>
{
    //  HARD CODED A URL I FOUND , NOT USING THE "url" param
    return this.http.get("https://conduit.productionready.io/api/profiles/eric").map(response => {
        return response.json() || {success: false, message: "No response from server"};
    }).catch((error: Response | any) => {
        return Observable.throw(error.json());
    }).toPromise();
}

这行得通，

从

调用

event.service.ts

功能...

this.Request.get("/user").then(response => {
        console.log("Got response:", response);
    }).catch(error => {
        console.log("Got error:", error);
    }).then(response => {
        console.log("Another response:", response);
    }).catch(error => {
        console.log("Got another error:", error);
    });

相反，我想做的是 Observables

所以

我尝试“订阅”

订阅者

我不太明白如何使用“数据”和“订阅”等。

 var url = "https://conduit.productionready.io/api/profiles/eric";
    var blah;
    this.getDataObservable(url).subscribe(
         data => {
             blah = data;
             console.log("I CANT SEE DATA HERE: ", blah);
         }
     );

调用函数

getDataObservable(url: string) {
    return this.http.get(url)
        .map(data => {
            data.json();
            // the console.log(...) line prevents your code from working 
            // either remove it or add the line below (return ...)
            console.log("I CAN SEE DATA HERE: ", data.json());
            return data.json();
        });
}

Answer 1

有很多个例子来说明如何做到这一点......这里有一个：

服务

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

private handleError(error: Response) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

组件

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

注意：这是使用原始的 Http 服务，而不是新的 HttpClient 服务。

要理解这段代码，你需要理解 Observables 和 Http 是如何工作的。我强烈建议阅读 Angular.io 上的文档，完成 angular.io 上的教程，或观看诸如此类的课程：https://app.pluralsight.com/library/courses/angular-2-getting-started（您可以注册免费一周观看。）

Answer 2

你的服务应该是这样的，所以你可以在组件中订阅

getDataObservable(url: string) {
    return this.http.get(url).map(data =>  data.json()).catch(error=>Observable.throw(error));
}