Question

我正在尝试更新一些Angular 4 / rxjs代码以使用新版本5语法，但遇到了一些麻烦。

原始进口报表：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import Properties from './properties';
import ErrorHandler from './error-handler';

//From vendor.ts
import 'rxjs/Subject'
import 'rxjs/BehaviorSubject';
import 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/timeoutWith';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/publishReplay';
import 'rxjs/Subscription';

原始代码：

downloadStatus(job : DownloadJob) : Observable<DownloadJob> {
    let params = {"jobId": job.id};
    return this.http.post(Properties.URLS.core.downloadStatus.href, params, this.getOptions())
                .retryWhen((errors) => {
                    return errors.mergeMap((error) => (error.status === 404) ? Observable.of(error) : Observable.throw(error))
                                    .delay(Properties.SETTINGS.download.pollInterval);
                })
                .timeoutWith(Properties.SETTINGS.download.timeout, Observable.of<DownloadJob>(job))
                .map(this.extractData).catch(ErrorHandler.handleError);
}

更新了导入语句：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { map, catchError, retryWhen, timeoutWith, flatMap, mergeMap, delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import Properties from './properties';
import ErrorHandler from './error-handler';
//From vendor.ts
import 'rxjs/Subject'
import 'rxjs/BehaviorSubject';
import 'rxjs/Observable';
import 'rxjs/operators/catchError';
import 'rxjs/operators/filter';
import 'rxjs/operators/map';
import 'rxjs/operators/switchMap';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/debounceTime';
import 'rxjs/operators/timeoutWith';
import 'rxjs/operators/retryWhen';
import 'rxjs/operators/delay';
import 'rxjs/operators/distinctUntilChanged';
import 'rxjs/operators/publishReplay';
import 'rxjs/observable/of';
import 'rxjs/Subscription';

更新代码：

downloadStatus(job : DownloadJob) : Observable<DownloadJob> {
    let params = {"jobId": job.id};
    return this.http.post(Properties.URLS.core.downloadStatus.href, params, this.getOptions()).pipe(
                retryWhen((errors) => {
                    return errors.pipe(
                                mergeMap((error) => (error.status === 404) ? of(error) : Observable.throw(error)),
                                delay(Properties.SETTINGS.download.pollInterval)
                    );
                }),
                timeoutWith(Properties.SETTINGS.download.timeout, of(job)),
                map(this.extractData),
                catchError(ErrorHandler.handleError)
    );
}

错误讯息：

TS2345: Argument of type 'UnaryFunction<Observable<DownloadJob>, Observable<DownloadJob>>' is not assignable to parameter of type 'UnaryFunction<Observable<Response>, Observable<DownloadJob>>'.
  Types of parameters 'source' and 'source' are incompatible.
    Type 'Observable<Response>' is not assignable to type 'Observable<DownloadJob>'.
      Type 'Response' is not assignable to type 'DownloadJob'.
        Property 'id' is missing in type 'Response'.

我遇到的问题是从timeoutWith函数中的Observable.of（job）到（job）的转换。 TypeScript编译器现在（可以理解）抱怨能够分配对象类型。

使用这种新语法如何解决这个问题？

提前致谢！

Answer 1

看起来您需要某处map(response => response.json() as DownloadJob)（可能在retryWhen()之前）。

有理由抱怨post()返回Observable<Response>，timeoutWith()返回DownloadJob。

您之前没有看到问题，因为旧原型样式timeoutWith的输入错误。它仍然将返回类型显示为Observable<Response>并忽略传递给它的参数的类型。

Answer 2

我想我找到了一个解决方法。我对rxjs和Observable有点新，但我认为这是等价的：

downloadStatus(job : DownloadJob) : Observable<DownloadJob> {
    let params = {"jobId": job.id};
    return this.http.post(Properties.URLS.core.downloadStatus.href, params, this.getOptions()).pipe(
                retryWhen((errors) => {
                    return errors.pipe(
                                mergeMap((error) => (error.status === 404) ? of(error) : Observable.throw(error)),
                                delay(Properties.SETTINGS.download.pollInterval)
                    );
                }),
                timeoutWith(Properties.SETTINGS.download.timeout,
                            Observable.create(observer => {
                                observer.next(job);
                                observer.complete();
                            })),
                map(this.extractData),
                catchError(ErrorHandler.handleError)
    );

Angular 4到5升级 - Observable.of

2 个答案: