angular学习之浅析HttpClientModule模块-猿码集

1. 前言

Angular作为一个全面的前端框架，其强大的模块化功能与遵循MVC开发模式的框架架构受到广泛的认可和市场的青睐，但是作为前端开发人员，我们在开发过程中有可能面对不同类型的数据，如何从不同类型请求中获取相关信息，我们必须要使用到HttpClientModule模块。

2. HttpClientModule模块介绍

HttpClientModule是Angular中一个用于在应用程序中发起HTTP请求的模块。它具有一些功能，如可观察性、JSON解析、错误处理等，并且默认支持CORS。

该模块使我们可以使用typescript的强类型语法来指定请求类型，而不用传统的$.ajax()请求方式。HttpClientModule的使用更加方便，简单且更清晰，直接返回响应体的数据类型，不再需要经过繁杂的类型判断处理。这些特性让我们更轻松地实现和管理自己的应用程序请求。

2.1 HttpClientModule模块基本用法

在Angular中导入HttpClientModule模块很简单，只需在应用程序的根模块中使用import语句来导入HttpClientModule：


import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [HttpClientModule],
  ...
})
export class AppModule {}

导入HttpClientModule模块后，我们可以直接在组件的构造函数中注入HttpClient服务。


import { HttpClient } from '@angular/common/http';
constructor(private httpClient: HttpClient) {}

我们可以通过httpClient的相关方法来发起HTTP请求。

2.2 发起GET请求

httpClient的get()方法是用来发起GET请求。我们需要传递两个参数，第一个参数是请求的url，第二个是可选参数我们可以通过传递一个对象来设置请求的多个选项，像请求参数，请求头等等。


this.httpClient.get(url, options).subscribe(result => {
  console.log(result);
});

get()方法会返回HttpResponse对象，该对象包含响应体、响应状态码、响应头等信息。我们可以使用响应体中的数据进行我们后续的操作。

2.3 发起POST请求

httpClient的post()方法是用来发起POST请求。与get()方法类似，我们需要传递两个参数，第一个参数是请求的url，第二个是请求体。同样可以通过传递一个对象来设置请求的多个选项，像请求参数、请求头等等。


this.httpClient.post(url, body, options).subscribe(result => {
  console.log(result);
});

post()方法同样返回HttpResponse对象，我们可以使用其中的数据进行我们的后续操作。

2.4 取消请求

HttpClient允许我们取消请求。我们可以通过使用Subscription来存储get()或post()方法返回的可观察对象，然后使用Subscription的unsubscribe()方法来取消请求。


import { Subscription } from 'rxjs';
private mySubscription: Subscription;
cancelRequest() {
  if (this.mySubscription) {
     this.mySubscription.unsubscribe();
  }
}
requestData() {
  this.mySubscription = this.httpClient.get(url, options).subscribe(result => {
    console.log(result);
  });
}

2.5 设置请求头

我们可以使用httpHeader对象来设置请求头，如下所示：


import { HttpHeaders } from '@angular/common/http';
const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + token
});
this.httpClient.get(url, { headers: headers }).subscribe(result => {
  console.log(result);
});

2.6 设置超时时间

我们可以使用setTimeout()方法来使request在一定时间后超时，只需将其作为timeout选项的值，传递给request options对象即可，如下所示：


this.httpClient.get(url, { timeout: 15000 }).subscribe(result => {
  console.log(result);
});

2.7 错误处理

我们可以对请求错误做出相应的处理，HttpClientModule自带的默认错误处理函数的返回值是一个新的可观察对象（Observable）( 空的Observable )，虽然在此次请求中抛出了一个错误，但并不会对程序造成影响，不会中断整个程序的执行。

在HttpClientModule中，我们可以通过catchError和throwError来实现自定义的错误处理，如下所示：


import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
this.httpClient.get(url).pipe(
  catchError(error => {
      console.log(error);
      return throwError('Error in processing request.');
  })
).subscribe(result => {
  console.log(result);
});

3. 总结

本文浅析了HttpClientModule模块的基本用法，包括发起GET和POST请求、设置header头、取消请求、超时设置、错误处理等。HttpClientModule模块非常方便，并且可以帮助开发者节省很多约定代码。开发者可以根据自己的需要,使用HttpClient模块进行开发。!

angular学习之浅析HttpClientModule模块