详解如何在Angular优雅编写HTTP请求

2023-09-04 21:55:04 171

引言

基本上当下的应用都会分为前端与后端，当然这种前端定义不在限于桌面浏览器、手机、APP等设备。一个良好的后端会通过一套所有前端都通用的RESTfulAPI序列接口作为前后端之间的通信。

这其中对于身份认证都不可能再依赖传统的Session或Cookie；转而使用诸如OAuth2、JWT等这种更适合API接口的认证方式。当然本文并不讨论如何去构建它们。

一、API设计

首先虽然并不会讨论身份认证的技术，但不管是OAuth2还是JWT本质上身份认证都全靠一个Token来维持；因此，下面统一以token来表示身份认证所需要的值。

一套合理的API规则，会让前端编码更优雅。因此，希望在编写Angular之前，能与后端相互达成一种“协议”也很有必要。可以尝试从以下几点进行考虑。

版本号

可以在URL（例：https://demo.com/v1/）或Header（例：headers:{version:'v1'}）中体现，相比较我更喜欢前者的直接。

业务节点

以一个节点来表示某个业务，比如：

商品https://demo.com/v1/product/
商品SKUhttps://demo.com/v1/product/sku/

动作

由HTTP动词来表示：

GET请求一个商品/product/${ID}
POST新建一个商品/product
PUT修改一个商品/product/${ID}
DELETE删除一个商品/product/${ID}

统一响应

这一点非常重要，特别是当我们新建一个商品时，商品的属性非常多，但如果我们缺少某个属性时。可以使用这样的一种统一的响应格式：

{
"code":100,//0表示成功
"errors":{//错误明细
"title":"商品名称必填"
}
}

其中code不管成功与否都会有该属性。

状态码

后端响应一个请求是包括状态码和响应内容，而每一种状态码又包含着不同的含义。

200成功返回请求数据
401无权限
404无效资源

二、如何访问Http？

首先，需要导入HttpClientModule模块。

import{HttpClientModule}from'@angular/common/http';

@NgModule({
imports:[
HttpClientModule
]
})

然后，在组件类注入HttpClient。

exportclassIndexComponent{
constructor(privatehttp:HttpClient){}
}

最后，请求点击某个按钮发送一次GET请求。

user:Observable;
getUser(){
this.user=this.http.get('/assets/data/user.json');
}

打印结果：

{{user|async|json}}

三个简单的步骤，就是一个完整的HTTP请求步骤。

然后，现实与实际是有一些距离，比如说身份认证、错误处理、状态码处理等问题，在上面并无任何体现。

可，上面已经足够优雅，要让我破坏这种优雅那么此文就变得无意义了！

因此……

三、拦截器

1、HttpInterceptor接口

正如其名，我们在不改变上面应用层面的代码下，允许我们把身份认证、错误处理、状态码处理问题给解决了！

写一个拦截器也是非常的优雅，只需要实现HttpInterceptor接口即可，而且只有一个intercept方法。

@Injectable()
exportclassJWTInterceptorimplementsHttpInterceptor{

intercept(req:HttpRequest,next:HttpHandler):Observable|HttpUserEvent>{
//doing
}

}

intercept方法有两个参数，它几乎所当下流行的中间件概念一般，req表示当前请求数据（包括：url、参数、header等），next表示调用下一个“中间件”。

2、身份认证

req有一个clone方法，允许对当前的请求参数进行克隆并且这一过程会自行根据一些参数推导，不管如何用它来产生一个新的请求数据，并在这个新数据中加入我们期望的数据，比如：token。

constjwtReq=req.clone({
headers:req.headers.set('token','xxxxxxxxxxxxxxxxxxxxx')
});

当然，你可以再折腾更多请求前的一些配置。

最后，把新请求参数传递给下一个“中间件”。

returnnext.handle(jwtReq);

等等，都return了，说好的状态码、异常处理呢？

3、异常处理

仔细再瞧next.handle返回的是一个Observable类型。看到Observable我们会想到什么？mergeMap、catch等一大堆东西。

因此，我们可以利用这些操作符来改变响应的值。

mergeMap

请求过程中会会有一些过程状态，比如请求前、上传进度条、请求结束等，Angular在每一次这类动作中都会触次next。因此，我们只需要在返回Observable对象加上mergeMap来观察这些值的变更，这样有非常大的自由空间想象。

returnnext.handle(jwtReq).mergeMap((event:any)=>{
if(eventinstanceofHttpResponse&&event.body.code!==0){
returnObservable.create(observer=>observer.error(event));
}
returnObservable.create(observer=>observer.next(event));
})

只会在请求成功才会返回一个HttpResponse类型，因此，我们可以大胆判断是否来源于HttpResponse来表示HTTP请求已经成功。

这里，统一对业务层级的错误code!==0产生一个错误信号的Observable。反之，产生一个成功的信息。

catch

catch来捕获非200以外的其他状态码的错误，比如：401。同时，前面的mergeMap所产生的错误信号，也会在这里被捕获到。

.catch((res:HttpResponse)=>{
switch(res.status){
case401:
//权限处理
location.href='';//重新登录
break;
case200:
//业务层级错误处理
alert('业务错误：'+res.body.code);
break;
case404:
alert('API不存在');
break;
}
returnObservable.throw(res);
})

4、完整代码

至此，拦截器所要包括的身份认证token、统一响应处理、异常处理都解决了。

@Injectable()
exportclassJWTInterceptorimplementsHttpInterceptor{

constructor(privatenotifySrv:NotifyService){}

intercept(req:HttpRequest,next:HttpHandler):Observable|HttpUserEvent>{
console.log('interceptor')
constjwtReq=req.clone({
headers:req.headers.set('token','asdf')
});
returnnext
.handle(jwtReq)
.mergeMap((event:any)=>{
if(eventinstanceofHttpResponse&&event.body.code!==0){
returnObservable.create(observer=>observer.error(event));
}
returnObservable.create(observer=>observer.next(event));
})
.catch((res:HttpResponse)=>{
switch(res.status){
case401:
//权限处理
location.href='';//重新登录
break;
case200:
//业务层级错误处理
this.notifySrv.error('业务错误',`错误代码为：${res.body.code}`);
break;
case404:
this.notifySrv.error('404',`API不存在`);
break;
}
//以错误的形式结束本次请求
returnObservable.throw(res);
})
}
}

发现没有，我们并没有加一大堆并不认识的事物，单纯都只是对数据流的各种操作而已。

NotifyService是一个无须依赖HTML模板、极简Angular通知组件。

5、注册拦截器

拦截器构建后，还需要将其注册至HTTP_INTERCEPTORS标识符中。

import{HttpClientModule}from'@angular/common/http';

@NgModule({
imports:[
HttpClientModule
],
providers:[
{provide:HTTP_INTERCEPTORS,useClass:JWTInterceptor,multi:true}
]
})

以上是拦截器的所有内容，在不改变原有的代码的情况下，我们只是利用短短几行的代码实现了身份认证所需要的TOKEN、业务级统一响应处理、错误处理动作。

四、async管道

一个Observable必须被订阅以后才会真正的开始动作，前面在HTML模板中我们利用了async管道简化了这种订阅过程。

{{user|async|json}}

它相当于：

letuser:User;
get(){
this.http.get('/assets/data/user.json').subscribe(res=>{
this.user=res;
});
}
{{user|json}}

然而，async这种简化，并不代表失去某些自由度，比如说当在获取数据过程中显示【加载中……】，怎么办？


{{user|json}}

加载中……

恩！

五、结论

Angular在HTTP请求过程中使用Observable异步数据流控制数据，而利用rxjs提供的大量操作符，来改变最终值；从而获得在应用层面最优雅的编码风格。

当我们说到优雅使用HTTP这件事时，易测试是一个非常重要，因此，我建议将HTTP从组件类中剥离并将所有请求放到Service当中。当对某个组件编写测试代码时，如果受到HTTP请求结果的限制会让测试更困难。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解如何在Angular优雅编写HTTP请求

热门推荐

随机推荐