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

全文由5358个单词组成，预计持续16分钟。

资料来源:Pexels

本文将讨论如何在Angular应用程序中执行请求。

1.用拦截器装饰请求

2.httpclient和HttpBackend的比较

3.其他方式

本文基于我多年的前端工作经验(4年的角度工作经验)。请随时对任何错误发表评论。

用拦截器装饰请求

当使用应用程序接口时，HTTP拦截器是一个主要的特性。通过拦截，您可以使用拦截器来检查HTTP请求，并将它们从应用程序发送到服务器，并将它们从服务器返回的响应转换到应用程序。

简而言之:

在实际操作中，在用户登录后，传输到后端的每个API都需要在头部添加授权，以验证用户的身份和授权。

示例1:使用拦截器将JWT添加到请求中

@ injective()export class RequestInterceptOrServiCe实现HttpInterceptor{构造函数(私有存储:存储){ }拦截(请求:HttpRequest & lt任何>，下一个:HttpHandler):可观察& lt任何>{ const UserInfo = this . store . SelectSnapshot & lt；用户>(状态=>。国家。appstate . user)；const AuthReq = request . clone({ heads:new HttpHeaders({ ' Content-Type ':' application/JSON '，' Authorization ':' Bearer $ { UserInfo . token } `}))；返回next . handle(AuthReq)；} }

使用拦截器向请求中添加jwt

示例2:使用拦截器来控制应用程序中的微调器

@ injective({ ProvidedIN:' root ' })export class LoadIngInterceptor服务{ ActiveRequests:number = 0；构造函数(私有LoadingScreenService:LoadingService){ }拦截(请求:HttpRequest & lt任何>，下一个:HttpHandler):可观察& lthttp事件<。任何>>。{ if(this . ActiveRequests = = = 0){ this . LoadingScreenService . StartLoadIng()；} this.activeRequests++;返回next.handle(请求)。管道(最终确定(()=>。{ this . ActiveRequests-；if(this . ActiveRequests = = = 0){ this . LoadingScreenService . StopLoading()；} }))}；}

使用拦截器来控制应用程序上的微调器

示例3:使用拦截器缓存请求

@ injective()export class CachingInterceptor实现HttpInterceptor {构造函数(私有缓存:RequestCache) {} intercept(请求:HttpRequest & lt任何>，下一步:HttpHandler) { //如果不能缓存，请继续。如果(！可访问(请求)){返回下一个.句柄(请求)；} const CachedResponse = this . cache . get(请求)；返回缓存响应？(缓存响应) :发送请求(请求，下一个，this . cache)；} }

使用拦截器缓存请求

您还可以做更多与请求相关的事情:

在应用编程接口失败的情况下显示模型。

响应后根据状态码增加更多操作规则。

覆盖网址请求或请求正文

拦截器会影响你所有的请求。那么，如何在Angular中定制请求并禁用拦截器呢？让我们一起来看看

HttpClient vs. HttpBackend

我观察到许多开发人员仅在需要向后端发送请求时，才在角度项目中使用HttpClient。这是不对的。

为什么？

资料来源:Pexels

因为我们通过HttpClient发送的请求总是通过Angular的拦截器。为了解决这个问题，一些开发人员编写了更多的代码来禁用拦截器，我称之为“欺骗代码”。一些开发人员不使用拦截器来处理请求并为每个请求添加头。

这使得代码充满了代码气味和技术债务。开发人员必须使用上述两个选项之一来做更多的工作。

解决方法:使用HttpClient和HttpBackend发送请求。

唯一的区别是HttpBackend直接向后端发送请求，而不通过拦截器链。

http服务示例:

从“@角度/核心”导入{可注射}；从' @angular/common/http '导入{ HttpHeaders，HttpClient，HttpParams，HttpBackend }；从“rxjs”导入{ Observable，rowError，of }；从“rxjs/operators”导入{ CaptError }；@ injective({ providedIn:' root ' })export class Httpservice { privateHttpWithoutinterceptor:HttpClient；构造函数(私有http: HttpClient，私有HttpBackend:HttpBackend){ this . HttpWithoutInterceptor =新的HttpClient(HttpBackend)；} privateformatErrors(错误:任意){ returnthrowError(错误.错误)；}获取(路径:字符串，参数:HttpParams =new HttpParams()):可观察& lt任何>{返回this.http.get(`${path} `，{ params })。管道(CaptError(this . FormatErrors))；}放置(路径:字符串，正文:对象= {}):可观察& lt任何>{返回this . http . put(`$ { path } `, JSON . stringify(body))。管道(CaptError(this . FormatErrors))；}帖子(路径:字符串，正文:对象= {}，选项:对象= {}):可观察& lt任何>{返回this . http . post(`$ { path } `, JSON . stringify(body)，选项)。管道(CaptError(this . FormatErrors))；}删除(路径):可观察& lt任何>{返回this.http.delete( `${path} `)。管道(CaptError(this . FormatErrors))；} _get(路径:字符串，参数:HttpParams =新的HttpParams()):可观察& lt任何>{返回this . httpwithoutinterceptor . get(`$ { path } `，{ params })。管道(CaptError(this . FormatErrors))；} _put(路径:字符串，正文:对象= {}):可观察& lt任何>{返回this . httpwithoutinterceptor . put(`$ { path } `, JSON . stringify(body))。管道(CaptError(this . FormatErrors))；} _post(路径:字符串，正文:对象= {}，选项:对象= {}):可观察& lt任何>{返回this . httpwithoutinterceptor . post(`$ { path } `, JSON . stringify(body)，选项)。管道(CaptError(this . FormatErrors))；} _删除(路径):可观察& lt任何>{返回this . httpwithoutinterceptor . delete(`$ { path } `)。管道(CaptError(this . FormatErrors))；} }

查看GitHub在❤托管的rawhttp.service.ts

使用httpclient和httpbackend的Httpservice示例

您将决定通过拦截器的方式和不通过的方式。

对于某些特定的应用程序接口(应用程序接口)，您需要不同的标题或添加其他信息，然后才能使用HttpBackend对其进行手动定制。

其他方式

我使用这个标题是因为下面是一些你可能遇到或没有遇到的小用例。

失败后如何调用应用编程接口？

getConfig() {返回this.http.get<。配置>设置。(this.configUrl)。管道(重试(3)，//最多重试3次失败的请求)；}

重试失败的请求最多三次。

如果请求失败，请使用retry()(异常重试)来延长尝试请求的时间。

如何捕捉错误？

建议使用next()函数来捕获拦截器错误。

@ injective()export class ErrorInterceptOrServiCe实现Httpinterceptor { constructor(){ }拦截(请求:HttpRequest & lt任何>，下一个:HttpHandler):可观察& lt任何>{下一步返回。处理(请求)。管道(CaptError(this . HandleError))；} privatehandleError(错误:HttperOrresponse){ if(错误. error instance of ErrorEvent){ console . error('发生错误:'，error . error . message)；}否则{控制台.错误(`后端返回代码${error.status}，`+ `正文为:$ { error . error } `)；}返回错误(“发生了一些不好的事情；请稍后再试。)；}；}

如何避免XSRF攻击？

当执行一个HTTP请求时，拦截器从cookie中读取令牌，默认为XSRF-TOKEN，并将其设置为HTTP头X-XSRF-TOKEN。由于只有在您的域上运行的代码可以读取cookie，后端可以确定HTTP请求来自您的客户端应用程序，而不是来自攻击者。

如果后端服务对XSRF令牌cookie或标头使用不同的名称，它将被httpclientXSRFModule覆盖。withoptions()。

进口:

资料来源:Pexels

本文包含使用角度应用程序接口时的所有必要信息，包括:

使用拦截器来管理请求和响应

如何使用HttpClient和HttpBackend

请求失败后，如何召回，如何捕捉错误并避免XSRF攻击。

我希望这篇文章对你有所帮助！

评论、表扬和关注

让我们分享人工智能学习和发展的干货。

如果重印，请在后台留言并遵守重印规则。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/3553.html。