将应用程序更新到Angular 7和RxJS 6.3.3后可观察到的问题

时间:2019-01-30 13:16:22

标签: angular rxjs angular7 angular-httpclient rxjs6

我将我的应用程序更新为Angular 7和RxJS 6.3.3,并且在更改代码时遇到问题。我真的需要帮助,因为我找不到Google解决方案或堆栈溢出。

我的进口商品:

import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Injectable, Inject, Optional, InjectionToken } from '@angular/core';
import { Headers, ResponseContentType, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';

这是我的test函数的代码:

protected test(response: Response): Observable<MyResponseClass | null> {
    const status = response.status;

    if (status === 200) {
       let result200: any = null;
       ... some code ...
       return of<MyResponseClass | null>(result200);
    }
    return of<MyResponseClass | null>(<any>null);
}

这里是MyResponseClass伪代码:

class MyResponseClass implements IMyResponseClass {
    property1?: string | undefined;
    property2?: string | undefined;
    property3: boolean;

    ...
}

IMyResponseClass伪代码:

interface IMyResponseClass {
    property1?: string | undefined;
    property2?: string | undefined;
    property3: boolean;
}

这是我的get()函数的代码:

get(): Observable<MyResponseClass | null> {
    let url_ = some_url;

    let options_: any = {
        method: "get",
        headers: new Headers({
            "Content-Type": "application/json",
            "Accept": "application/json"
        })
    };

    return this.http.request(url_, options_).pipe(
        map((response_: any) => { return this.test(response_); })),
        catchError((err: any, caught: Observable<MyResponseClass | null>) => {
            if (caught instanceof Response) {
                try {
                    return this.test(<any>caught);
                } catch (e) {
                    return <MyResponseClass | null><any>Observable.throw(e);
                }
            } else
            return <MyResponseClass | null><any>Observable.throw(caught);
        })
    );
}

我仍然收到此错误:

enter image description here

这是此错误的文本版本:

Argument of type '(err: any, caught: Observable<MyResponseClass>) => MyResponseClass | Observable<MyResponseClass>' is not assignable to parameter of type '(err: any, caught: Observable<MyResponseClass>) => ObservableInput<MyResponseClass>'.
  Type 'MyResponseClass | Observable<MyResponseClass>' is not assignable to type 'ObservableInput<MyResponseClass>'.
    Type 'MyResponseClass' is not assignable to type 'ObservableInput<MyResponseClass>'.
      Type 'MyResponseClass' is not assignable to type 'Iterable<MyResponseClass>'.
        Property '[Symbol.iterator]' is missing in type 'MyResponseClass'.

我做错了什么?你能帮我吗?


Here是我在该错误之前所做的上一步。也许在上一步中我出了什么问题?


我在阅读所有注释后进行了更改,所以现在get()函数如下所示:

return this.http.request(url_, options_).pipe(
            map((response_: any) => { return this.test(response_); }),
            catchError((err: any, caught: Observable<MyResponseClass | null>) => {
                if (caught instanceof Response) {
                    try {
                        return this.test(<any>caught);
                    } catch (e) {
                        return throwError(e);
                    }
                } else
                    return throwError(caught);
            })
        );

我仍然遇到错误:

enter image description here

3 个答案:

答案 0 :(得分:2)

我注意到您可能不应该从test函数返回一个Observable。

无错误示例https://stackblitz.com/edit/angular-zimn8f

检查并让我知道。

答案 1 :(得分:1)

请勿从rxjs-compat导入可观察的内容,请使用rxjs

使用rxjs-compat的唯一好理由是,如果您的依赖项仍然依赖于旧版本的rxjs

答案 2 :(得分:0)

您必须从catchError函数返回一个Observable!

您可以使用of返回默认值,或使用throwError引发错误。

import { Observable, of, throwError } from 'rxjs';

return this.http.request(url_, options_).pipe(
  catchError((err: any, caught: Observable<MyResponseClass | null>) => {
    if (something) {
      return of(null);
    } else
      return throwError('An error occured');
    })
)

编辑:

我想用这个答案指出,您必须从catchError返回一个Observable,但由于并非总是这样做,所以会出现错误。我不明白为什么您总是在ofObservable.throw()调用中使用类型断言。在这种情况下,我认为您不需要类型断言。

例如返回<MyResponseClass | null><any>Observable.throw(e)在您的catchError回调中,您尝试返回一个非Observable。