在 Ionic 2/Angular 2 中解決一些 Promise 之后如何返回 Observable？

Question

我試圖在成功完成我的 Promise 后返回一個 observable，但該函數沒有返回 Observable。 具體到代碼，我想從存儲中獲取身份驗證令牌（返回承諾），然后在獲取數據后生成對 Api 的 Post 請求（返回 Observable）。 通過這樣做，sublime text 會在函數上給出一個錯誤，即“聲明類型既不是‘void’也不是‘any’的函數必須返回一個值”下面是我的代碼，

logout() : Observable<any>{
  this.userData.getAuthToken().then((token)=>{
    this.token = token;
    this.headers = new Headers ({
      "X-USER-TOKEN": token
    });
    this.options = new RequestOptions ({
      headers: this.headers
    });
    var logout_url = "Api logout method";
    return this.http.post(logout_url,{},this.options)
      .map (res => res.json())
  });
}

如果我只是做一個發布請求，那么它會像這樣返回

return this.http.post(logout_url,{},this.options)
  .map (res => res.json())

但是當我嘗試獲取數據時，它不會從這個帖子請求中返回值。 任何幫助都感激不盡！ 提前致謝

Answer 1

使用fromPromise將promise轉換為observable並使用mergeMap將HTTP響應發送到組合的observable：

import { Observable } from 'rxjs/Observable/';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

logout(): Observable<any>{
  return Observable.fromPromise(this.userData.getAuthToken()).mergeMap(token => {
    this.token = token;
    this.headers = new Headers({
      "X-USER-TOKEN": token
    });
    this.options = new RequestOptions({
      headers: this.headers
    });
    var logout_url = "Api logout method";
    return this.http.post(logout_url, {}, this.options).map(res => res.json());
  });
}

Answer 2

你將返回一個Promise （如果你沒有錯過它前面的return部分），它會在成功時返回一個Observable 。 請考慮僅使用Observables ，而不是將它們混合使用。

您還可以將其封裝到新的Observable ： new Observable(observer =>
https://angular-2-training-book.rangle.io/handout/observables/using_observables.html

Answer 3

在RXJS> 6時， fromPromise from函數合並到使用mergeMap ，你需要先使用pipe 。 所以這段代碼會起作用

import { Observable, from } from "rxjs";
import { map, mergeMap } from "rxjs/operators";

logout(): Observable<any>{
  return from(this.userData.getAuthToken()).pipe(mergeMap(token => {
    this.token = token;
    this.headers = new Headers({
      "X-USER-TOKEN": token
    });
    this.options = new RequestOptions({
      headers: this.headers
    });
    var logout_url = "Api logout method";
    return this.http.post(logout_url, {}, this.options).map(res => res.json());
  }));
}

Answer 4

Sunil 的回答適用於我的用例，這是我的工作示例。 我在我的 http 攔截器中使用它來將訪問令牌附加到 HTTP 請求

import {from, Observable} from "rxjs";
import {mergeMap} from "rxjs/operators";

 handleTokenExpiration(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.isAccessTokenPresent()) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.getAccessToken()}`
        }
      });
      return next.handle(request);
    } else {
      if (this.isRefreshTokenPresent()) {
        return from(this.refreshToken(this.getRefreshToken())).pipe(mergeMap(res => {
          request = request.clone({
            setHeaders: {
              Authorization: `Bearer ${this.getAccessToken()}`
            }
          });
          return next.handle(request);
        }));
      } else {
        this.logout();
      }
    }
  }