javascript - Angular2 promise : How to use the response from Http Get

我是 Angular 的新手，正在关注 this tutorial 来学习基础知识。考虑以下 http get 调用。

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
  }

将 observable 转换为 promise 后，如何使用 then() 子句中的函数真正利用响应(例如控制台日志、解析和访问响应元素等)？

我尝试了以下操作，即使它记录了响应，我也无法真正访问响应对象中的任何内容。

this.http.get(url, {headers : this.headers})
                        .toPromise()
                        .then(function(res) {
                                console.log(res);
                                return res => res.json().data as Query[];
                        })
                        .catch(this.handleError);

任何帮助将非常感激。谢谢你。

最佳答案

Angular2 使用 RXjs 可观察而不是 promise 。它的工作方式如下。

创建 httpService 如下。

httpService.ts

import {Injectable, Inject} from '@angular/core';
import {Http, Response, RequestOptions, Request, Headers} from '@angular/http';

declare let ApiUrl : any;

@Injectable()
export class httpService {
    constructor(private http: Http){}

    getHeader = () => {
        let headers = new Headers();
        headers.append("Content-Type", 'application/json');

        return headers;
    };

    request = (req) => {
        let baseUrl = ApiUrl,
            requestOptions = new RequestOptions({
            method: req.method,
            url: baseUrl+req.url,
            headers: req.header ? req.header : this.getHeader(),
            body: JSON.stringify(req.params)
        });

        return this.http.request(new Request(requestOptions))
                        .map((res:Response) => res.json());
    }
}

现在只需在您的组件/指令中使用此服务，如下所示:

componenet.ts

import {Component, Inject, Directive, Input, ElementRef} from '@angular/core';

@Directive({
  selector: '[charts]' // my directive name is charts
})
export class chartsDirective{

  constructor(@Inject('httpService') private httpService){}

  ngOnInit(){

    this.httpService.request({method: 'POST', url: '/browsers', params:params, headers: headers})
            .subscribe(
                data => self.data = data, //success
                error => console.log('error', error),
                () => {console.log('call finished')}
            )
  }
}

最后你只需要将你的 httpService 添加到 ngModule 的提供者:

appModule.ts

import {NgModule} from '@angular/core';
import {ApiService} from "./api.service";

@NgModule({
    providers: [
        {provide : 'httpService', useClass : httpService}
    ]
})

export class apiModule{}

现在，您可以像在 component.ts 中那样注入(inject)，在代码中的任何位置使用 httpService

关于javascript - Angular2 promise : How to use the response from Http Get，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42266960/