問題描述

在我的 api 服務中的每個 http 調用之前，我想檢查我的本地存儲是否有訪問令牌，然后在我擁有它后進行調用.看起來是這樣的

Before each http call in my api service I want to check my local storage for an access token, then make the call once I have it. It looks like this

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())

      });


  }

在我的組件中，我會有類似的東西

And in my component I would have something like

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

這一直有效，直到我在檢查本地存儲后將 http 調用放入 .then 中.所以我認為它現在嵌套不正確.

This was working until I put the http call inside of the .then after checking the local storage. So I think it is now nested incorrectly.

解決這個問題的正確方法是什么?在此設置中，是否有更有效的方式從本地存儲中獲取我的令牌?注意:我使用的是 Ionic 2，它有自己的功能來檢查返回承諾的本地存儲.

What is the correct way to appraoch this? And is there perhaps a more efficent way to grab my token from local storage in this set up? NOTE: I am using Ionic 2 which has its own function for checking local storage which returns a promise.

任何建議都會很棒.

謝謝.

推薦答案

您必須將 http observable 轉換為 promise 或將 promise 轉換為 observable.

You will have to convert the http observable to a promise or convert promise to an 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 的承諾:

Promise to 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 的承諾:

Promise to 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 - 從承諾中返回 HTTP的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！