typescript Angular 13从后端抛出特定错误消息

x0fgdtte  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(116)

我有一个应用程序(后台+前台),Angular 和前台我都是新手,我想知道如何从后台得到具体的错误信息
当我创建一个人,我写他的电子邮件作为一个无效的电子邮件在后端我得到这个:

在我的Angular 应用程序中,我有errorHandler:

errorHandler(error:any) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      errorMessage = error.error.message;
    } else {
      errorMessage = Error Code: ${error.status}\nMessage: ${error.message};
    }
    return throwError(errorMessage);
  }

我在我create方法中捕获到了它:

create(user:User): Observable<any> {
    return this.httpClient.post(this.apiURL + 'api/user/', JSON.stringify(user), this.httpOptions)
      .pipe(
        catchError(this.errorHandler)
      )
  }

我连接到astr以显示操作成功与否的一些消息:

submit() {
    console.log(this.form.value);
    this.messageService.create(this.form.value).subscribe((res: any) => {
      this.toastr.success("Created successfully!");
      console.log('Post created successfully!');
      this.router.navigateByUrl('messages').then(r => console.log(r));
    },
      (error)=>{
      void this.toastr.error(error.messageType,"We have an error! Something went wrong")
      })
  }

但我只得到静态消息,有些东西是错误的,我需要从我的后端获得特定的消息(如果用户名已经被占用,或电子邮件无效)
当我写错误toastr:

(error)=>{
      void this.toastr.error(error,"We have an error! Something went wrong")
      })

我得到的结果是:

wrrgggsh

wrrgggsh1#

首先,在涉及this的情况下,传递闭包比传递函数引用更安全:

catchError(err => this.errorHandler(err))

其次,必须为throwError()指定一个错误工厂,而不是一个常量值,例如:

throwError(() => errorMessage);

第三,我不确定您希望看到什么,但是您在submit()调用中没有使用error,您的意思是这样的吗?

error => this.toastr.error(error.messageType, `We have an error: ${error}`)
0yycz8jy

0yycz8jy2#

您是否有多个拦截器?在我的例子中,其中一个拦截器重新抛出error.message而不是error,这导致其他拦截器只获得消息而不是整个对象。
按原样重新引发错误:
return throwError(() => new Error(err.message));
它应该是怎样的,以便其他拦截器可以访问错误对象:
return throwError(() => err);

**记住:**拦截器作为中间件工作。顺序很重要

  • 请求从索引0到N
  • 响应从索引N返回到0

Angular按照您提供拦截器的顺序应用拦截器。

相关问题