关于角度：Angular2错误处理最佳实践


Angular2 Error Handling Best Practice

我有一个关于Angular2错误处理的最佳实践的问题。 这是我用来捕获错误的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Getdata(data: object){

        let body = JSON.stringify(data);
        let headers = new Headers({ 'Content-Type': 'application/json' });

        return this.http.post('/getData', body)
            .map((res) => res.json())
            .catch(this._errorHandler);
    }

  _errorHandler(error: Response){
        console.log("Error Dataservice", error);
        return Observable.throw(error ||"Server Error");
    }

我是否需要为每个新方法创建一个Catch，或者我是否可以始终使用_errorHandler？

谢谢！

相关讨论

服务中的捕获块和组件中的订阅错误回调

这是我在项目开发过程中使用的内容。服务中的catch块负责转换错误。组件中的错误回调负责更新任何视图逻辑。

服务

我很少从api中以我需要的格式获取所需的数据，因此我在.map()方法中转换数据。然后我将一个catch块附加到序列中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Service Class
getTableData(): Observable<Table>{
    return this.http.get('url')
        .map(res => {
            // transform data as needed
            return transformedData;
        }
        .catch(err => {
            // transform error as needed
            let transformedError = GlobalFunction.transformError(err);

            return Observable.throw(transformedError);
        }
}

现在我在发生错误时执行我想要的任何变换。例如，我可以调用一个将错误转换为用户友好响应的全局方法

1
2
3
4
5
6
7
8
9
10
11
// GlobalFunction Class
transformError(err){
   switch(err.status){
   case 404:
       return {
           status: err.status,
           message: 'Oops, it looks like that resource was not found'
       }
       break;
   }
}

零件

现在在我的组件中，我订阅了序列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Component Class
ngOnInit(){
    this.loading = true;
    this.error = false;

    this.subscription = this.service.getTableData().subscribe(
        res => {
            this.table = res;
            this.loading = false;
        },
        err => {
            this.message = err.message;
            this.error = true;
            this.loading = false;
        }
     );
}

通过在服务中包含我的所有数据转换，我保持了视图逻辑的美观和精益。我相信这种方法可以将各个部分分开。该服务提供数据和组件更新视图。

仅在组件中捕获

这就是我在我的项目中所做的，而且效果非常好。服务从来没有阻止。每个方法都返回一个流，所有参数都是流。 catch块放在组件内部并采取适当的操作。

例外

在我介入之间有一些例外。

  • 获取身份验证令牌时出错，处理错误。重定向到登录页面。
  • 执行多个呼叫时出错，撤消更改

我很少处理它们之间的错误。大多数情况下，流在组件中开始和结束，并且错误处理在组件中完成。

例

所有以$结尾的参数都是流。

零件：

1
2
3
4
5
6
7
8
9
10
11
12
13
public error = false;
public errorMessage = '';
public users$;

constructor(private router: Router, private _userService: UserService){
    const userId$ = this.router.params.map(params => params['id']);
    this.users$ = this._userService.getUsers$(userId$)
        .catch(error => {
           this.error = true;
           //translate error into user friendly language
           this.errorMessage = error;
        });
}

HTML

1
2
3
4
5
6
<ul *ngIf="!error">
 <li *ngFor="let user of users$ | async">{{user.name}}
</li>


</ul>

UserService

1
2
3
4
5
6
7
8
public getUsers$(userId$: Observable<string>): Observable<User[]>{
    return userId$.flatMap(
      userId => this.authService.getAuthToken$()
                    .flatMap(
                       authToken => this.http.get('url', {userId})
                                         .map(res => res.json())
   );
}

如果未找到authtoken或会话过期或任何原因，AuthService将具有一个catch块，用于将用户重定向到登录页面。将所有错误放在所有位置，以便catch块位于组件中。

我刚刚想出了这个例子，如果有任何错误让我知道。

相关讨论