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？

1 个答案: