angular 拦截器

需求描述
前台需要请求后台的API,然后在请求时API的样式均有如下格式:
/api/…
所以依照不写重复代码的原则,一种方法我们可以定义一个公共变量,另一种就是可以定义一个拦截器,然后在请求API之前,为路径添加公共部分,再去请求。
angular中的拦截器
angular中要定义拦截器,需要实现HttpInterceptor接口,然后实现intercept()方法。
@Injectable()
export class MyInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
return next.handle(req);
}
}
该方法接受了两个参数。第一个我们通过名字一下子就看出来这个是什么意思:这是一个http请求,他是我们主要操作的对象。另一个参数是next,他表示拦截器链表中的下一个拦截器。也就是说他会将http请求传递给下一个拦截器。这个链表的最后一项就是后端处理器,所以最后用过next将请求传给后台处理。
然后我们的需求是在请求之前修改请求路径,所以需要这么写:
intercept(req: HttpRequest<any>, next: HttpHandler) {
const cloneRequest = req.clone({
url: `api/${req.url}` // 添加默认api访问路径
});
return next.handle(cloneRequest);
}
在angular中,如果想要修改请求,就需要调用它的clone方法,然后修改这个克隆体,最后将克隆体通过next对象,传递给下一个对象,或传给后台。
这里我只对url进行了修改,当然还可以处理请求中的其他方面。

官方参考:https://angular.cn/guide/http…https://angular.cn/api/common…https://angular.cn/api/common…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理