如何在Angular组件中优雅地处理404?

问题描述 投票:0回答:1

我正在使用Angular 6.并且在这个特定用例中想要处理404,而是将其传递给组件以在UI中显示文本消息。

// code in service
public getVariatioMarginPlugDates(): Observable<Date[]> {
return this._http
              .get<Date[]>(AppSettings.VariationMarginPlugDatesUrl, { withCredentials: true })
              .pipe(catchError(this._trace.handleError('GET ' + AppSettings.VariationMarginPlugDatesUrl, [])));
}

404也由使用错误处理程序实用程序的catchError处理。但是我想捕获404并可能设置一些布尔变量,组件可以使用它来在UI上显示有用的状态消息(不查找404重定向或通用弹出窗口)

非常感谢!

// edited code with solution
public getVariatioMarginEmail(runDate: string): Observable<any> {
const url = AppSettings.VariationMarginEmailUrl.replace(this._regExp, runDate);
return this._http
              .get<any>(url, { withCredentials: true })
              .catch(this._trace.handleError('GET ' + url, []));
}

public handleError<T>(operation = 'operation',  result?: T, skipStatus = [404]) {
    return (error: any): Observable<T> => {

      if (skipStatus.includes(error.status)) {
        return observableOf(error.status as T);
      }

      const errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
      console.error(errMsg);

      const dialog = this._dialogService.open({
        title: 'Server Error',
        content: `${operation} failed: ${errMsg}`,
        actions: [ { text: 'Ok' } ]
      });

      try { this._loggingService.log(errMsg); } catch (error) {}

      return observableOf(result as T); // return empty result
  };
}
angular rxjs6
1个回答
2
投票

我认为你需要改变句柄错误方法,几个选择:

1)不要把它放在管道里。然后您的组件将收到错误,您可以检查状态代码并处理您需要的方式

2)改变句柄方法以检查状态,并重新抛出组件可以处理的404。如果您还想在handleError方法中使用其他日志记录等,则可以执行此操作

3)改变handle方法以获取一个配置告诉它要跳过哪个状态,404。如果某些组件应该获得泛型方法,你可以这样做,但是这个组件应该专门处理它的错误本身

© www.soinside.com 2019 - 2024. All rights reserved.