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？

THX！

Answer 1

在服务中捕获块＆amp;组件中的订阅错误回调

这是我在项目开发时使用的内容。服务中的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块位于组件中。

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

Angular2错误处理最佳实践

2 个答案: