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 块。每个方法都返回一个流，所有参数都是流。将 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>

用户服务

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

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

我只是想出了这个例子，如果有任何错误，请告诉我。