Angular 中如何使用 HttpClient 发送 http 请求？-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，我们经常需要与后端服务进行通信，获取数据或者提交数据。而发送 http 请求是实现这一目的的基础，Angular 提供了 HttpClient 来发送 http 请求，本文将介绍如何在 Angular 中使用 HttpClient 发送 http 请求。

HttpClient 简介

HttpClient 是 Angular 中用于发送 http 请求的模块，它基于 RxJS 的 Observable 提供了一种灵活的方式来处理异步数据流。HttpClient 在 Angular 4.3 中引入，取代了之前的 Http 模块。

HttpClient 的使用非常简单，我们只需要导入 HttpClientModule 模块，并在组件中注入 HttpClient，就可以使用 HttpClient 发送 http 请求了。

发送 GET 请求

发送 GET 请求是最常见的 http 请求之一，我们可以使用 HttpClient 的 get 方法来发送 GET 请求。下面是一个发送 GET 请求的示例代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(data => {
      console.log(data);
    });
  }
}

在上面的代码中，我们首先在组件的构造函数中注入了 HttpClient，然后在 getData 方法中使用 HttpClient 的 get 方法发送 GET 请求。get 方法接收一个参数，即请求的 URL，它会返回一个 Observable 对象，我们可以通过 subscribe 方法来订阅这个 Observable 对象，获取响应数据。

发送 POST 请求

发送 POST 请求通常用于提交数据，我们可以使用 HttpClient 的 post 方法来发送 POST 请求。下面是一个发送 POST 请求的示例代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  postData() {
    const data = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };

    this.http.post('https://jsonplaceholder.typicode.com/posts', data).subscribe(response => {
      console.log(response);
    });
  }
}

在上面的代码中，我们首先定义了一个数据对象，然后在 postData 方法中使用 HttpClient 的 post 方法发送 POST 请求。post 方法接收两个参数，第一个参数是请求的 URL，第二个参数是请求的数据。post 方法也会返回一个 Observable 对象，我们可以通过 subscribe 方法来订阅这个 Observable 对象，获取响应数据。

错误处理

在实际开发中，http 请求可能会失败，我们需要对请求失败进行处理。HttpClient 提供了 catchError 操作符来处理请求失败的情况。下面是一个错误处理的示例代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').pipe(
      catchError((error: HttpErrorResponse) => {
        console.log(error);
        return throwError('请求失败，请稍后重试。');
      })
    ).subscribe(data => {
      console.log(data);
    });
  }
}

在上面的代码中，我们使用 catchError 操作符来处理请求失败的情况。catchError 接收一个函数作为参数，这个函数会接收一个 HttpErrorResponse 对象，我们可以在这个函数中处理请求失败的情况。如果请求失败，我们可以通过 throwError 函数抛出一个错误，这个错误会被订阅者的 error 回调函数捕获。

总结

HttpClient 是 Angular 中用于发送 http 请求的模块，它基于 RxJS 的 Observable 提供了一种灵活的方式来处理异步数据流。在本文中，我们介绍了如何在 Angular 中使用 HttpClient 发送 http 请求，并对错误处理进行了讲解。通过学习本文，你可以掌握 Angular 中使用 HttpClient 发送 http 请求的基本方法，为日后的开发工作打下基础。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65518be3d2f5e1655db496d1