详解使用angular的HttpClient搭配rxjs

本文将详细介绍Angular中的HttpClient与rxjs的结合使用，特别是在长沙网络推广中的应用。对于正在寻找相关知识的开发者来说，这无疑是一个非常有价值的参考。

一、原Http的使用

在Angular应用中，使用原生的Http服务是第一步。需要在根模块或核心模块中引入HttpModule。比如，在AppModule或CoreModule中进行如下引入：

```typescript

import { HttpModule } from '@angular/http';

@NgModule({

import: [HttpModule]

// ...

})

export class AppModule {}

```

接着，在需要使用Http服务的地方进行注入。例如：

```typescript

import { Http } from '@angular/http';

// ...

constructor(private http: Http) {}

ngOnInit() {

this.http.get(`url`).subscribe((res) => {

// 成功回调

}, (err) => {

// 失败回调

});

}

```

如果想要添加特定的头部或body，需要配置请求的可选参数。原生的Http服务存在一些缺陷，例如不支持文件传输，且响应结果需要手动执行json()以得到json格式的结果。

二、改用HttpClient

在Angular 4.3版本开始，引入了更强大的HttpClient。其基本使用方法与原Http服务类似，但更为便捷。需要引入HttpClientModule。然后，注入HttpClient服务即可使用。例如：

```typescript

import { HttpClientModule } from '@angular/common/http';

// ...

@NgModule({

import: [HttpClientModule]

// ...

})

export class AppModule {}

```

在使用上，HttpClient的使用方式与原Http服务类似，但无需手动调用json()来将结果转为json格式。而且，HttpClient支持更多类型的请求，支持监听请求进度，并添加了能力。已知的一个小缺陷是delete请求不能再添加body作为可选参数。

三、

在Angular应用中，我们经常需要为所有的HTTP请求添加特定的请求头，比如认证信息。以往的做法是自己封装一个MyHttp服务来代理Http服务，并在其中添加统一的处理逻辑。有一种更为简洁和高效的方式——使用（Interceptor）。

是一种特殊的服务，它实现了HttpInterceptor类。通过，我们可以在请求被发送之前或响应被接收之后对其进行预处理。这使得我们可以轻松地为所有请求添加统一的请求头。

下面是一个简单的MyInterceptor服务示例：

```typescript

import {Injectable} from '@angular/core';

import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';

@Injectable()

export class MyInterceptor implements HttpInterceptor {

intercept(req: HttpRequest, next: HttpHandler): Observable> {

// 获取认证信息

let authInfo = {token: 'testtoken', admin: 'testadmin'};

// 克隆请求，以便对副本进行操作，原请求为只读

const authReq = req.clone({

headers: req.headers.set('Authorization', authInfo.token || '').set('Admin', authInfo.admin || '').set('Content-Type', 'application/json;charset=UTF-8')

});

// 通过next参数发送处理后的请求

return next.handle(authReq);

}

}

```

接下来，我们需要在根模块中注入这个，以便在整个应用中生效。具体操作如下：

```typescript

import {NgModule} from '@angular/core';

import {HTTP_INTERCEPTORS} from '@angular/common/http';

@NgModule({

providers: [

{

provide: HTTP_INTERCEPTORS,

useClass: MyInterceptor,

multi: true // 表示可以注入多个

},

],

})

export class AppModule {}

```

通过上面的配置，所有发出的HTTP请求都会经过MyInterceptor的预处理。在这个中，我们可以为所有请求添加统一的头部信息，如认证令牌等。这样，在实际使用HttpClient发起请求时，无需在每个请求中都手动添加这些头部信息，系统会自动为我们处理。这种方式既简洁又高效，极大地提高了开发效率和代码的可维护性。响应预处理：优化请求结果的判断与处理

在开发中，我们经常需要处理来自服务器的响应结果。有时候，我们可能会遇到一些尴尬的情况，比如成功回调中还需要处理错误，或者错误回调中还需要区分请求本身的错误和服务器逻辑错误。这种情况使得我们的代码变得复杂且难以维护。为了解决这个问题，我们可以通过响应预处理和来重新整理请求结果，确保成功回调必然成功，失败回调必然失败。

什么是响应预处理？简单来说，就是在请求得到结果后，对结果进行一些预处理操作。这些操作可以通过实现，对请求结果进行重新整理，以便更好地适应我们的业务逻辑。

在Angular中，rxjs是一个重要的库，它提供了许多操作符来帮助我们处理异步操作。原Http和新的HttpClient两个服务流严重依赖了rxjs。请求的发起返回的是一个Observable对象，只有在执行其subscribe方法时，才会真正发起请求。这个方法接收三个参数，分别是成功回调、失败回调和完成回调。

在响应预处理中，我们可以使用rxjs的map操作符进行映射。通过操作intercept方法返回的next.handle(req)，我们可以对请求结果进行重新整理。例如，在收到200状态的响应时，我们可以根据业务逻辑判断请求是否真正成功。如果成功，我们返回新的事件对象，否则抛出错误。对于其他状态码，比如401，我们可以移除存储的auth_token并导航到登录页面。

对于rxjs的学习，简直胜看十篇博客。掌握rxjs的使用方式，可以更好地处理异步操作，简化代码逻辑。

响应预处理是一种处理请求结果的有效方式。通过和rxjs的操作符，我们可以更好地处理请求结果，避免在成功回调和错误回调中进行复杂的错误处理。这样可以使我们的代码更加简洁、易读、易维护。

我还想推荐一个网站/工具/服务/应用（cambrian.render('body')），它在响应预处理和rxjs方面提供了很多实用的教程和工具，可以帮助大家更好地学习和应用相关知识。希望这个推荐能对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

以上就是本文的全部内容，希望能对大家的学习有所帮助。