如何优雅地处理 Angular 组件中的 404？

Question

我正在使用 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
  };
}

Answer 1

我认为你需要更改处理错误的方法，有几个选择：

1）这里不要放在管道里。然后你的组件会得到错误，你可以检查状态代码并处理你需要的

2) 修改handle方法检查状态，重新抛出组件可以处理的404。如果你还想在 handleError 方法中进行其他日志记录等，你可以这样做

3) 更改 handle 方法以进行配置，告诉它要跳过哪个状态，404。如果某些组件应该获得通用方法，您可以这样做，但是这个组件应该专门处理它自己的错误

如何优雅地处理 Angular 组件中的 404？

How to gracefully handle 404 in Angular component?

angular

rxjs6