为HttpClient返回值指定数据类型(Angular)

在使用 Angular 的 HttpClient 访问后台服务时,接收返回的Json值通常使用的是 any 类型,但使用这种方式往往会导致不能提前发现一些程序的问题,比如:名称拼写错误等…

无类型的写法

我们以 Angular课程实验手册(一) 中的访问后端登录服务的案例来进行说明。下面是最初的登录代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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');
}
});
}

上面代码中的第 7 行和第 9 行向我们展示了如何对 any 类型的对象的属性进行访问。可以看到,我们通过使用属性的字符串名称: “succ”和”data”来进行访问。 如果开发者不小心写错了一个字符,比如把”succ”写成了”secc”, 那这段程序就不能运行出我们想要的结果了,并且这样的问题有时候还不好查( 考眼力:) )。在比较大型的应用开发中,类似这样的问题还比较常见的。那能不能在编译阶段,甚至是在配置良好的IDE中的编码阶段,系统就能发现问题,并提示开发者,而不需要等到运行程序报错以后才知道呢?

解决的方法当然是避免使用 any, 而给返回值一个特定的类型。

定义返回实体

一个开发组织(团队、公司)通常会定义统一的前、后端通讯协议,包括从后端给前端返回值的数据结构。类似Angular课程实验手册(五) 中定义的的那样。对于 typescript 来说,可以方便的定义一个类来统一返回值的结构。 如下面的代码:

1
2
3
4
5
6
7
export class ApiResult<T> {

succ: boolean;
code: string;
msg: string;
data: T;
}

succ, code 和 msg 是确定的类型,而每次调用返回的数据可能是不同的类型,所以这里用了泛型来表示。

处理服务端返回

有了整个类,我们就可以在网络调用中为返回值指定类型,如下面的代码所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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) {
console.log('success');
this.securitySrv.token = res.data;
this.router.navigate(["home"]);
} else {
console.log('fail');
}
});
}

可以看到,我们在第6行使用了定义好的 ApiResult 类型,因为这个接口如果访问成功,则在 data 属性中包含一个代表(token)的字符串。因此我们使用了 ApiResult。其中 string 就是在这个特定的调用中的 data 类型。 当然,对于返回复杂数据的接口,也可以使用自定义的类型。

经过这样的处理,在第7行和第9行,就可以自己使用”.”符合来访问属性,并且如果拼写错误,不小心把 “succ”写成了”secc”, 系统也会立即提示,并且编译也会报错。

本文标题:为HttpClient返回值指定数据类型(Angular)

文章作者:晨星

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

最后更新:2020年09月16日 - 08:09

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

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