如何解决角度8中的Observable中的捕获错误?

时间:2019-10-09 05:16:12

标签: angular typescript angular8

我执行错误处理程序代码,但是在catch中遇到错误。未定义的方法。

这是我的serivce.ts代码。

import { Injectable } from "@angular/core";
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { user } from "./user";
import { Observable } from "rxjs";
import "rxjs/add/operator/catch";
import "rxjs/add/Observable/throw";
@Injectable({
  providedIn: "root"
})
export class DemoService {
  private url: string = "/assets/demo/user.json";
  constructor(private http: HttpClient) {}

  getuserdetails(): Observable<user[]> {
    return this.http.get<user[]>(this.url).catch(this.errorHandler);
  }
  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "server error.");
  }
}

这是我的app.component.ts文件代码

 public userdetails = [];
  public errorMsg;
  constructor(private user: DemoService) {}
  ngOnInit() {
    this.user
      .getuserdetails()
      .subscribe(
        $data => (this.userdetails = $data),
        error => (this.errorMsg = error)
      );
  } 

我遇到了错误。并且错误消息是“可观察”类型上不存在“捕获”属性。

4 个答案:

答案 0 :(得分:4)

您可以在 catchError 中使用 rxjs/operators 。 尝试如下。

import { catchError } from 'rxjs/operators';

export class DemoService {

    getuserdetails(): Observable<user[]> {
        return this.http.get<user[]>(this.url)
            .pipe(catchError(this.errorHandler))
    }
    errorHandler(error: HttpErrorResponse) {
        return Observable.throw(error.message || "server error.");
    }
}

答案 1 :(得分:3)

捕获可观察错误的最佳方法是:

this.http.get<user[]>(this.url).pipe(
   tap(),
   catchError(err => { return this.errorHandler(err) }
)

如果this.http.get()是Promise的宠儿,就象您在代码.catch(...)中所做的一样。如果使用catchError(...),请尝试将其放在管道的末尾或finalize(..)之前。

在Observables没有.pipe()和You之前,像在Promises中那样进行链接操作,因此他们将名称.then()更改为flatMap(),将.catch()更改为catchError()程序员知道这是可观察的还是应许的。

答案 2 :(得分:3)

   import { Observable, throwError } from 'rxjs';
   import { catchError, } from 'rxjs/operators';


    return this.http.get<user[]>(this.url).pipe(catchError(this.errorHandler))

      errorHandler(error: HttpErrorResponse) {
        return throwError(error.message || "server error.");
      }

答案 3 :(得分:0)

在最新版本的rxjs中,您应该使用:

...
return return this.http.get<user[]>(this.url).subscribe((r:Author)=>console.log("GOOD"),err=>console.log("ERROR))
...