Angular应用访问后台服务时的错误处理

Angular 框架中内置了通过 HTTP/HTTPS 访问后端服务的模块 HttpClientModule, 通过模块中的 HttpClient 对象,开发者可以轻松的实现访问后端的 restful 接口。因为 HttpClient 采用了响应式的编程风格(rxjs),所以很多初学者对于如何做错误处理会比较模糊,本文试图通过一些例子给读者一些指引。

subscribe 方法中的错误处理

我们知道, 在调用 HttpClient 的网络访问方法(比如: GET, POST, PUT 等)时会返回一个 Observable 的对象,通过调用改对象上的 subscribe 方法可以拿到返回的结果。如在课堂案例中,访问后端登录接口的代码如下:

login.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
login() {
console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);
let ob = this.securitySrv.login(this.userId, this.pwd);

ob.subscribe(res => {
if (res['succ']) {
console.log('success');
this.securitySrv.token = res['data'];
this.router.navigate(["home"]);
} else {
console.log('fail');
}
});
}

security-srv.service.ts

1
2
3
login(username: string, password: string) {
return this.http.post(`${this.BASE_URL}/api/login`, { userId: username, password: password });
}

以上的组件代码(login.component.ts)的第3行和第5行,是为了突出在组件调用中生成了 Observable 对象才分开写的,通常的写法时连在一起,如下:

1
2
3
4
5
6
7
8
9
10
11
12
login() {
console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);
let ob = this.securitySrv.login(this.userId, this.pwd).subscribe(res => {
if (res['succ']) {
console.log('success');
this.securitySrv.token = res['data'];
this.router.navigate(["home"]);
} else {
console.log('fail');
}
});
}

注意:对于业务可识别的错误,我们一般采用判断返回对象中 succ 属性的值来判断,如以上代码中的第4行到第10行所展示的

为了处理技术性错误,比如网络不能访问,跨域错误等等,我们可以采用 subscribe 内置的错误处理来完成。修改 login.component.ts 中的 login 方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
logi() {
console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);

let ob = this.securitySrv.login(this.userId, this.pwd);

ob.subscribe(res => {
if (res["succ"]) {
this.securitySrv.token = res["data"];
this.router.navigate(["home"]);
} else {
console.log('fail');
}
},
error => {
console.log(error)
alert('网络错误')
})
}

可以看到,我们调用 subscribe 方法时,多加了一个参数,该参数是一个箭头函数,参数为调用时的错误信息对象 error。然后就可以在箭头函数的代码段完成处理处理,比如提示用户,记录错误信息等。

对错误进行分类处理

如果我们希望得到错误的详细信息或是按错误的类别进行分类处理,那又要怎么做呢?

实际上 error 对象是 HttpErrorResponse 的实例,包含了错误的信息信息。

1
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://uat-1.hohistar.com.cn1/api/login", ok: false, …}

这样我们就可以根据 HttpErrorResponse 中的相关信息,进行分类处理。 示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  login() {
console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);

let ob = this.securitySrv.login(this.userId, this.pwd);

ob.subscribe(res => {
if (res["succ"]) {
this.securitySrv.token = res["data"];
this.router.navigate(["home"]);
} else {
console.log('fail');
}
},
error => {
console.log(error)
if (error.error instanceof ErrorEvent) {
console.error('错误: ', error.error.message);
} else {
console.error(`执行业务方法出错: ${error.status} - ${error.error}`)
}
})
}
}

在Service中处理错误

在实际项目中建议将错误处理放在 Service 中来完成,在界面上 (Component) 中应该只需要简单的显示错误即可, 在 HttpClient 的响应式编程中我们也可以非常轻松过的实现。 在 Service 中定义一个错误处理的私有方法,在该方法中对 error 进行分类处理,如果需要提示用户,则使用 showError 将信息包装为 error 抛出给 Component。然后通过 rxjs 中的 pipe, 将该处理函数加入到整个处理中。 改造后的 Service 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
private handlerError(error: HttpErrorResponse) {
console.log('service handle error: ' + error);
return throwError('服务器无法访问');
}


login(username: string, password: string) {
// return this.http.post(`${this.BASE_URL}/api/login`, { userId: username, password: password });
return this.http.post(`${this.BASE_URL}/api/login`, { userId: username, password: password })
.pipe(
catchError(this.handlerError)
);
}

因为在 Service 进行了错误进行了处理,所以 Component 中只需要简单的截获显示错误信息即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
login() {
console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);

let ob = this.securitySrv.login(this.userId, this.pwd);

ob.subscribe((res: ApiResult<string>) => {
if (res["succ"]) {
this.securitySrv.token = res["data"];
this.router.navigate(["home"]);
} else {
console.log('fail');
}
},
error => {
alert(error)
})
}

注意最后的箭头函数, 在这里截获的错误(error)是已经经过转换的error, 包含了可以显示给用户的信息,所以直接显示即可

本文标题:Angular应用访问后台服务时的错误处理

文章作者:Morning Star

发布时间:2019年07月22日 - 12:07

最后更新:2021年04月16日 - 15:04

原始链接:https://www.mls-tech.info/web/angular/angular-httpclient-error-handle/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。