详细说明如何在rxjs中使用angular HttpClient

一、Http原始用法概述

施用方式

1.将HttpModule引入根模块或核心模块

也就是说，HttpModule被引入到AppModule或CoreModule中：

从“@angular/http”导入{ HttpModule }；@ ng module({ import :[httpmodule]//.})app module { 2 }。在使用Http服务的地方注入它。

从“@angular/http”导入{ Http }；//.构造函数(私有http : http){ } ngoninit(){ this . http . get(` URL ')。subscribe((RES)={//成功回调}，(err)={//失败回调})；}//.3.使用可选参数

如果要向请求中添加特定的标题或正文，您需要配置请求的可选参数：

从“@angular/http”导入{ Http，Header }；//.this.http.delete(`url `，{headers: new Header()，body : } })。订阅(.);//.缺点

已知的缺陷之一是它不支持文件传输。如果要编写一个文件上传的客户端，只能使用JS的原生XMLHttpRequest对象，然后自己打包rjs，得到一个更通用的文件上传服务。可以参考ngx-uploader。

另一个不能认为是缺陷的缺陷是Http请求的响应结果必须手动执行json()才能得到json格式的结果。

第二，切换到HttpClient

在angular 4.3的@angular/common/http中引入了HttpClient功能

施用方式

基本的使用方法类似于最初的Http服务。首先，引入HttpClientModule，然后注入HttpClient服务以供使用：

从“@angular/common/http”导入{ HttpClientModule }；//.@ ng module({ import :[Httpclientmodule]})//.从“@angular/common/http”导入{ Http client }；//.构造函数(私有http : http客户端){}//.this.http.get ('URL ')。subscribe((RES)={//成功回调}，(err)={//失败回调})；//.如果您添加额外的头和其他信息，它类似于最初的Http服务。引入相关变量后，可以填写第二个可选参数。

改进和加强

1.支持更多类型的请求，例如更改可选参数的responseType值可以改为直接请求文本内容. 2 .不再需要手动调用json()将结果转换为json格式，订阅的结果已经是body并转换为json(如果请求的是文本，则直接是文本内容)。3.支持监控请求进度(可用于文件上传)。4.添加了拦截器功能，用于预设请求规则和响应预处理。

缺乏

一个已知的小缺陷是，正文不能再作为可选参数添加到删除请求中，这有点尴尬。是否必须将参数拼写到url中才能批量删除？

第三，拦截器

本文暂时不讨论上传文件和监控请求进度的能力，可以查看官网相关内容。本文主要讲拦截器的简单使用。

将拦截器注入应用程序的效果是，由HttpClient发起的所有请求都将执行这个拦截器，类似于Node中的中间件。它可以在请求之前或响应之后完成。

我想到的第一个用途是，我不需要编写自己的Http服务来执行angular Http服务。过去，如果我想给应用程序的所有请求添加身份验证函数等请求头，最好是构建一个MyHttp服务来调用Http方法，并在请求回调中添加统一的结果处理。

拦截器是一种特殊的服务，它实现了HttpInterceptor类：

从“@angular/core”导入{ injective }；从“@angular/common/http”导入{HttpEvent，HttpInterceptor，HttpHandler，Httprequest }；@ Injectable()导出类MyInterceptor实现了Httpinterceptor { intercept(req : Httprequestany，next : Httphandler): observableHttpeventany { return next . handle(req)；}}编辑拦截器后，需要将其注入根模块：

从“@angular/core”导入{ NgModule }；从“@angular/common/http”导入{ HTTP _ INTERCEPTORS }；@ ng module({ provider :[{ provider : http _ interceptors，useclass: myinterceptor，multi: true，}]，})导出类appmodule {}预处理请求。

所有的工作都是在拦截器的拦截方法中进行的。如果要向所有请求添加身份验证头，可以操作req参数。请注意，req参数是只读的，您必须执行它的clone方法才能获得要操作的副本。已处理的副本可以通过下一个参数传输：

公共拦截(req: HttpRequestany，next : HttpHandler): observableHttpeventany { let AuthInfo={ token : ' test token '，admin : ' test admin ' }；const AutReq=req . clone({ header RS : req . headers。set('Authorization '，authInfo.token || ' ')。set('Admin '，authInfo.admin || ' ')。set('Content-Type '，' application/JSON；charset=UTF-8 ')})；返回next . handle(AuthReq)；}这样，在实际使用请求时可以直接使用HttpClient，所有的请求都会添加配置好的头信息。

响应预处理

请求得到结果后，往往需要对结果做出一些判断。例如，有些错误是请求本身的错误，它将被直接抛出到rjs的错误流中。有些请求是成功的，但它们是由某些服务器逻辑给出的错误。如果它们没有被处理，这些错误将被视为成功的请求，并将直接位于成功回调的旁边。当请求最终被订阅时，这将导致错误回调的错误处理，成功的回调中也有需要处理的错误。

一些请求()。subscribe((RES)={ if(RES . state){//真正成功} else {//或失败}}，(err)={//失败})；拦截器可以重新排列请求结果，以确保成功的回调会成功，失败的回调会失败：

返回next.handle(authReq)。map((event)={ if(event instance of HttpResponse){ switch(event . status){ case 200: if(event . body[' state ']){ let new event=event . clone({ body : event . body[' data ']}))；返回newEvent} else { throw event . body[' msg ']；} case 401: this . storage . remove(' auth _ token ')；this . router . navigate(['/log in '])；default : throw `【$ { event . status }】【$ { event . statustext } 】`；} }返回事件；});响应预处理的一个总结是操作intercept方法返回的next.handle(req)，并使用rxjs的map运算符进行映射。

第四，使用rxjs

Rxjs是angular非常依赖的一个大洞。一说到第一次接触，就会被它用大量眼花缭乱的操作符创建和订阅的用法搞糊涂了。

创建-订阅请求方法

两个服务流，最初的Http和新的HttpClient，严重依赖rxjs。请求的发起会返回一个Observable对象，该对象在被定义后不会直接发起请求。请求的真正发起是在执行其subscribe方法时，该方法接收三个参数，即成功回调、失败回调和完成回调。

Promise的例程是在定义(调用)请求时发起请求，然后迎来一系列的then()和catch()。你可以从捕获到捕获，或者从捕获到捕获拒绝。

Rxjs的例程是先创建一个Observable对象，很多规则可以由很多操作符来定义，比如接近当时的map操作符和接近catch的catch操作符。您可以直接从map运算符抛出错误回调，或者在catch运算符中捕获错误并返回新的成功流。这些都不会触发此请求。只有当subscribe()最终被执行时，整个请求才会真正被执行，这反映在三个回调中。

强烈推荐Rxjs5 Ultimate学习Rxjs，比看十个博客要好。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。