通用错误处理 Angular 14 - throwError 已弃用

Question

因此，在早期版本的Angular中，我有一个通用的CRUD服务，这个服务运行良好：

 deleteById<T>(id: any, apiMethod: string): Observable<T> {

    let callPoint = this.endpoint.concat('/', apiMethod, '/', id);

    return this.httpClient.delete<T>(callPoint, this.httpHeader)
      .pipe(
        retry(1),
        catchError(this.processError)
      )
  }

  processError(err: { error: { message: string; }; status: any; message: any; }) {
    let message = '';
    if (err.error instanceof ErrorEvent) {
      message = err.error.message;
    } else {
      message = `Error Code: ${err.status}\nMessage: ${err.message}`;
    }
    console.log(message);
    return throwError(message);
  }

现在我收到了一个警告，指出 processError 中的 return throwError(message); 行已经过时。

如果我将此行更改为：

return new Error(message);

然后我会在 deleteById 方法中的 catchError 调用中得到错误。catchError 现在不喜欢我传递 this.processError。

我一直在搜索互联网，但找不到任何好的示例，说明我如何能够更改这个问题。

非常感谢您的任何想法。

- bilpor

---

嗨，请看一下这个链接：https://dev59.com/aek5XIcBkEYKwwoY2NLV#68656760 - leonmain

这个回答解决了你的问题吗？throwError(error)现在已经被弃用，但是没有新的Error(HttpErrorResponse) - Yong Shun

感谢您的建议，但它们使用了throwError，而这正是我试图解决的问题。 - bilpor

Answer 1

根据 RxJs 文档，throwError 函数使用函数作为参数。

https://rxjs.dev/api/index/function/throwError

所以你需要做的是以下几步。

processError(err: any) { 
  let message = '';
  if (err.error instanceof ErrorEvent) {
    message = err.error.message;
  } else {
    message = `Error Code: ${err.status}\nMessage: ${err.message}`;
  }
  console.log(message);
  return throwError(() => new Error(message)); // use throwError from the rxjs package
}

希望它能对你有帮助！

- Diego Bascans

---

是的，这很有趣。如果我按照你的例子改变返回行，错误就会消失，但我不明白为什么我不再收到“throwError”已弃用的消息，因为我仍然在这一行中使用它。不过，我会考虑将其移动到拦截器中，那才是它真正应该在的地方，但至少这让我解决了最初的问题。谢谢。 - bilpor

如果您查看 RxJs 文档，传递错误的方法已被弃用，但将函数作为参数发送的方法未被弃用。可能有一些背景信息解释了为什么会弃用原来的方法并使用新方法，但我真的不知道答案。在回答中添加 RxJs 文档链接。 - Diego Bascans

Answer 2

我建议创建一个ErrorInterceptor服务来实现您项目中的通用错误处理。

请参考下面的代码：

/* all required imports go here */
export class ErrorInterceptor implements HttpInterceptor {
    intercept(
        request: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        return next.handle(request)
            .pipe(
                retry(1),
                catchError((error: HttpErrorResponse) => {
                    let errorMessage = '';
                    if (error.error instanceof ErrorEvent) {
                        // client-side error
                        errorMessage = `Error: ${error.error.message}`;
                    } else {
                        // server-side error
                        errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
                    }
                   console.log(errorMessage);
                   return throwError(() => {
                        return errorMessage;
                   });
                })
            )
    }
}

接下来，您可以在您的app.module.js中导入它，并使用它来处理项目中的任何类型的错误。

- inkredusk