全文共5358字,预计学习时长16分钟
来源:Pexels
本文将讨论如何在Angular应用程序中执行请求。
1. 使用拦截器来装饰请求
2. HttpClient 与HttpBackend的对比
3. 其他方式
这篇文章建立在我多年进行前端工作的经验(4年Angular工作经验)上。如有错误之处,请不吝赐教。
使用拦截器来装饰请求
使用API(应用程序接口)工作时, HTTP拦截器是一项主要特征。通过拦截,您使用拦截器,以检查HTTP请求并将其从应用程序发送到服务器,并从服务器返回应用程序的响应中进行转换。
简单来说:
在实际操作中,用户登录后,每个向后端传输的API都需要在标头添加授权,以核实用户的身份及授权。
例1:使用拦截器向请求添加JWT
@Injectable()
exportclass RequestInterceptorService implements HttpInterceptor{
constructor(private store: Store) { }
intercept(
request: HttpRequest<any>, next: HttpHandler
): Observable<any> {
const userInfo = this.store.selectSnapshot<User>(state => state.AppState.user);
const authReq = request.clone({
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': `Bearer ${userInfo.token}`
})
});
return next.handle(authReq);
}
}
使用拦截器向请求添加jwt
例2: 使用拦截器控制应用程序上的微调器
@Injectable({
providedIn: 'root'
})
exportclass LoadingInterceptorService {
activeRequests: number =0;
constructor(
private loadingScreenService: LoadingService
) { }
intercept(request: HttpRequest<any>, next