Angular2错误处理最佳实践

Question

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

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？

谢谢!

Answer 1

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

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

服务

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

// 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);
        }
}

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

// GlobalFunction Class
transformError(err){
   switch(err.status){
   case 404:
       return {
           status: err.status,
           message: 'Oops, it looks like that resource was not found'
       }
       break;
   }
}

零件

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

// 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;
        }
     );
}

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

Answer 2

仅在组件中捕获

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

例外

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

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

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

例

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

组件:

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

<ul *ngIf="!error"> 
 <li *ngFor="let user of users$ | async " >{{user.name}}</li>
</ul>

UserService

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块位于组件中.

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