在Angular软件中执行API请求的正确方式，了解一下

最新推荐文章于 2021-12-28 15:06:53 发布

「已注销」

最新推荐文章于 2021-12-28 15:06:53 发布

阅读量1.3k

点赞数

分类专栏：热点文章 AI 文章标签： angularjs api

本文链接：https://blog.csdn.net/duxinshuxiaobian/article/details/105246261

版权

本文探讨了在Angular中执行API请求的方法，包括使用HTTP拦截器装饰请求，HttpClient与HttpBackend的对比，以及处理错误、重试和XSRF防护。通过拦截器实现请求和响应的管理，使用HttpBackend避免拦截器影响特定请求。

摘要由CSDN通过智能技术生成

全文共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