在 Angular 2 HTTP 客户端包装器中对 headers 使用承诺

Question

我无法理解如何重构这个 Angular 2 HTTP 包装器，以便我的 header 在请求之前从存储中加载。

我目前正在构造函数中加载 header，但有时在请求发出之前，从存储中检索未完成。到目前为止，我还没有幸运地将 header 编队移动到 promise 但仍然返回 Observable 请求 object。相反，返回了 Promise，我必须使用 then() 才能到达 Observable。

感谢任何指导！

import { Injectable } from '@angular/core';
import { Http, Headers, Response, HTTP_PROVIDERS } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Storage, SqlStorage } from 'ionic-angular';


@Injectable()
export class HttpClient {
  headers : Headers;

  constructor(private http: Http) {

    this.headers = new Headers({
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=utf-8'
    })

    // Add auth token to headers
    let storage = new Storage(SqlStorage);

    storage.get("user").then(
      (u) => {
        if(u){
          let user = JSON.parse(u);
          this.headers.append('X-User-Email', user.email);
          this.headers.append('X-User-Token', user.authentication_token);
        }else{
          console.log("User not found in storage.")
        }
      }
    )
  }

  get(url) {
    console.log("GET headers: ", this.headers)

    // I want to add a promise here to load the header data
    // from storage before sending this request.  I still
    // want to return this same Observable http request.

    return this.http.get(url, {
      headers: this.headers
    })
  }
}

编辑

这是我的尝试，returns 'Promise<Observable<Response>>' 而不是 Observable:

import { Injectable } from '@angular/core';
import { Http, Headers, Response, HTTP_PROVIDERS } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Storage, SqlStorage } from 'ionic-angular';

/*
  A custom wrapper to include headers for API authentication.
  Header info is stored in local storage.
*/

@Injectable()
export class HttpClient {

  constructor(private http: Http) {
  }

  buildHeaders(){
    let headers = new Headers({
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=utf-8'
    })
    let storage = new Storage(SqlStorage);

    return storage.get("user").then(
      (u) => {
        if(u){
          let user = JSON.parse(u);
          headers.append('X-User-Email', user.email);
          headers.append('X-User-Token', user.authentication_token);
          return headers;
        }
      }
    )
  }

  get(url) {
    return this.buildHeaders().then(
      (headers) => {
        return this.http.get(url, {
          headers: headers
        })
      }
    )
  }
}

调用方收到错误消息：

this.http.get("http://localhost:3000/confirm_auth_token")
.subscribe(
  data => console.log(data)
)

这导致：

Error TS2339: Property 'subscribe' does not exist on type 'Promise<Observable<Response>>'.

我如何 "unwrap" 在 HttpClient 的 get() 方法中承诺？

Answer 1

您的 HttpClient.get 函数正在 return 调用 Promise，因此当 Promise 时您需要 then 来访问 Observable<Response>解决：

this.http
    .get("http://localhost:3000/confirm_auth_token")
    .then((observable) => {
        observable.subscribe((response) => { console.log(response.text()); }); // or response.json() or whatever
    });

如果您想从 get 函数中 return 一个 Observable，您可以像这样重新排列：

get(url) {
    return Observable
        .fromPromise(this.buildHeaders())
        .switchMap((headers) => this.http.get(url, { headers: headers }));
}

您的 get 调用将如下所示：

this.http
    .get("http://localhost:3000/confirm_auth_token")
    .subscribe(response => { console.log(response.text()); }); // or response.json() or whatever

在 Angular 2 HTTP 客户端包装器中对 headers 使用承诺

Use promise for headers in Angular 2 HTTP client wrapper

typescript

es6-promise

ionic2

angular