Question

在我的api服务中的每个http调用之前，我想检查我的本地存储以获取访问令牌，然后在我拥有它之后拨打电话。看起来像这样

read(endpoint,params?) {

    var url: string = this.authService.apiUrl + endpoint, 
        headers: Headers = new Headers(),
        queryString: URLSearchParams = new URLSearchParams();

    this.sessionService.getToken()
      .then((value) => {

        queryString.set('access_token', value);

        headers.append('Content-Type', 'application/json; charset=utf-8');

        return this.http.get(url,{
          headers: headers, 
          search: queryString
        })
        .map(res => res.json())

      });


  }

在我的组件中我会有类似

的东西

  getData() {
    this.apiService.read('some endpoint')
      .subscribe(
        res => console.log(res),
        error => this.logError(error)
      )
  }

这一直有效，直到我在检查本地存储后将http调用放在.then中。所以我认为它现在嵌套不正确。

对此进行评估的正确方法是什么？在这个设置中，是否有更有效的方法可以从本地存储中获取令牌？注意：我正在使用Ionic 2，它有自己的功能来检查返回承诺的本地存储。

任何建议都会很棒。

感谢。

Answer 1

您必须将http observable转换为promise或将promise转换为observable。

可观察到承诺：

read(endpoint,params?) {

    var url: string = this.authService.apiUrl + endpoint, 
        headers: Headers = new Headers(),
        queryString: URLSearchParams = new URLSearchParams();

    return this.sessionService.getToken() //return the outer promise
      .then((value) => {

        queryString.set('access_token', value);

        headers.append('Content-Type', 'application/json; charset=utf-8');

        return this.http.get(url,{
          headers: headers, 
          search: queryString
        })
        .map(res => res.json()).toPromise() //use Observable.toPromise

      });


  }

致电使用

this.apiService.read('some endpoint').then((data)=>{}).catch(err=>{})

对Observable的承诺：

read(endpoint,params?) {

    var url: string = this.authService.apiUrl + endpoint, 
        headers: Headers = new Headers(),
        queryString: URLSearchParams = new URLSearchParams();

    return Observable.fromPromise(this.sessionService.getToken())//convert to Promise and return chain.
      .switchMap((value) => {//use Observable.switchMap to move to second observable

        queryString.set('access_token', value);

        headers.append('Content-Type', 'application/json; charset=utf-8');

        return this.http.get(url,{
          headers: headers, 
          search: queryString
        })
        .map(res => res.json())

      });


  }

从 RXJS 5.5 开始：

对Observable的承诺：

read(endpoint,params?) {

    var url: string = this.authService.apiUrl + endpoint, 
        headers: Headers = new Headers(),
        queryString: URLSearchParams = new URLSearchParams();

    return fromPromise(this.sessionService.getToken())//import {fromPromise } from "rxjs/observables/fromPromise";
     .pipe(
      switchMap((value) => {//import {switchMap} from 'rxjs/operators/switchMap';

        queryString.set('access_token', value);

        headers.append('Content-Type', 'application/json; charset=utf-8');

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

  }

Angular 2 - 从promise内部返回HTTP

1 个答案: