返回 Promise 并从中创建 observable 时 Typescript Angular2 错误答案

【问题标题】：Typescript Angular2 errors when returning a promise and creating an observable from it返回 Promise 并从中创建 observable 时 Typescript Angular2 错误
【发布时间】：2017-11-01 13:47:15
【问题描述】：

我正在尝试从 getToken() 中的 ionics storage 检索令牌，然后在 refreshToken() 中使用它，通过将令牌传递给 (this.jwtHelper.isTokenExpired(this.token) 来查看令牌是否过期，这取决于是否返回 true 或 false令牌是否过期。我已将 cmets 放在 refreshToken() 中，我收到以下错误

错误 1：

Error: TS2345:Argument of type '(response: Response) => void' is not assignable to parameter of type '(value: Response) => void'. Types of parameters 'response' and 'value' are incompatible. Type 'Response' is not assignable to type 'Response'. Two different types with this name exist, but they are unrelated. Property 'body' is missing in type 'Response'.

错误 2：

Error:(34, 46) TS2339:Property 'token' does not exist on type 'Promise<any>'.

我的代码

import {AuthHttp, JwtHelper, tokenNotExpired} from "angular2-jwt";
import {Observable} from "rxjs/Observable";
import {AuthService} from "../Services/Auth/auth.service";
import {Injectable} from "@angular/core";
import { Storage } from '@ionic/storage';
import {AlertController} from "ionic-angular";

@Injectable()
export class TokenProvider {

jwtHelper: JwtHelper = new JwtHelper();
token;

constructor(private authHttp: AuthHttp, private storage: Storage, private alertCtrl: AlertController) {
}

getToken(): Promise<any> {
  return this.storage.get('token').then(token => {
     this.token = token;
  });
}

refreshToken(): Observable<any> {

  return this.token = Observable.fromPromise(this.getToken())
    .flatMap(() => {
      if(this.jwtHelper.isTokenExpired(this.token))
      {
        return this.authHttp.get('localhost.api/refresh')
          .subscribe(   // ERROR 1 HERE
            (response: Response) => {
              this.token = response.json().token;  // ERROR 2 HERE
            },
            (error: Response) => {
              console.log(error);
            });
      }
    });
}

【问题讨论】：

你能添加你对这个文件的导入语句吗？
已更新导入

标签： angular typescript ionic-framework ionic2

【解决方案1】：

您没有在代码中导入Response。编译器可能对使用哪个 Response 感到困惑，因为您的类型中可能有多个定义：

import { Response } from '@angular/http';

此外，您不会返回 flatMap 内的 observable。您正在返回 Subscription。像这样返回原始的 observable：

refreshToken(): Observable <any> {

    let observable = Observable.fromPromise(this.getToken())
     .filter(() => this.jwtHelper.isTokenExpired(this.token))
     .flatMap(() =>  this.authHttp.get('localhost.api/refresh'));
    observable.subscribe((response: Response) => {
            this.token = response.json().token;
        }, (error: Response) => {
            console.log(error);
        });
    return observable;
}

【讨论】：

这消除了响应错误（错误2），但现在我在.flatMap(() => { 说Error:(28, 16) TS2345:Argument of type '() => Subscription' is not assignable to parameter of type '(value: any, index: number) => ObservableInput<{}>'. Type 'Subscription' is not assignable to type 'ObservableInput<{}>'. Type 'Subscription' is not assignable to type 'ArrayLike<{}>'. Property 'length' is missing in type 'Subscription'. 上得到一个错误
你必须返回 flatMap 中的 observable。请参阅我的更新答案。
错误消失了，但是当我现在在浏览器中运行它时，我得到了这个错误TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
您可能需要filter 来过滤掉flatMap 之前的错误条件
另一个错误Error:(81, 10) TS2339:Property 'flatMap' does not exist on type 'boolean'. this.jwtHelper.isTokenExpired 返回真或假

【解决方案2】：

refreshToken 函数不正确

您不能在 RxJS 中订阅内部操作符
Get 返回一个 Observable（或您的情况下的承诺）

尝试以下方法：

refreshToken(): Observable<any> {    
  return this.token = Observable.fromPromise(this.getToken())
    .flatMap(() => {
      if(this.jwtHelper.isTokenExpired(this.token))
      {
        return this.authHttp.get('localhost.api/refresh')
      }
    })
    .catch(() => console.log(error))
    .map(response: Response => response.json())
    .subscribe(value => {
      this.token = value.token
    })
}

【讨论】：