Angular 11 - HTTP客户端快速入门指南

DebugUsery
88 阅读4分钟

Angular 11 - HTTP客户端快速入门指南

本教程将以循序渐进的方式引导你了解Angular 11 HTTP客户端模块。一般来说，我们会去了解如何在Angular中使用HTTP。我将向你展示如何从你的Angular 11应用程序向后端服务器发出HTTP请求。

前提条件

在我们继续之前，我们将需要以下条件。

  • 安装Angular CLI 11。
  • JavaScript和Angular方面的基本知识
  • HTTP请求知识

开始学习

本教程假定你已经在本地机器上安装了Angular 11应用程序。

现在通过运行以下命令前往你的Angular应用程序根目录。

cd my-app && ng start // starts angular application

接下来，在你的文本编辑器中打开app.module.ts ，导入Angular HTTP客户端。

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

在我们的应用程序中有了HTTP模块，让我们继续，在我们的app.component.ts 组件中实现对外部服务器的请求，该组件默认由Angular CLI生成。

打开你的app.component.ts ，添加以下脚本。

import { Component, OnInit } from '@angular/core'; 
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'my-app', //
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
   constructor(private httpClient: HttpClient) { }
   ngOnInit(): void {}
}

在上面的脚本中，我们已经导入了HttpClient并将其注入到我们类的构造函数中。这就是所谓的依赖性注入。

依赖注入，简化为DI是一种机制，AppComponent类将能够使用HTTPClient的依赖关系。

HTTP GET请求

现在我们已经将HTTP注入到我们的类中，下一步就是向一些服务器发出请求。

被调用的服务器应该响应我们的请求并返回一些数据。

然后我们可以在我们的应用程序中使用这些数据。

在我们的app.component.ts 脚本文件中，在ngonInit(){} 方法的下面添加以下内容。

 getAllUsers() {
  this.HttpClient.get<User[]>('https://www.myapiurl.com/users')
          .subscribe(response => {
              console.log(response);
          },
          error => {
			console.log(error);
          }
  );
}

在上面的脚本中，我们已经创建了一个方法getAllUsers() 。这个方法有一个HTTP方法，用来从一个端点'https://www.myapiurl.com/users ，获取用户。这个GET方法期望得到一个用户数组，就像刚才在端点GET<Users[]> 前输入的那样。

你已经注意到我们订阅了API响应。这个功能在JavaScript中被称为observable，它被用来管理异步数据。

我们订阅的响应会被记录在我们的控制台中。为了在我们的模板中使用这个响应，让我们把它分配给一个变量。

让我们在我们的类中创建一个变量users ，并将API的响应分配给它。

import { Component, OnInit } from '@angular/core'; 
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'my-app', //
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit { 
    users: User =[];
   constructor(private httpClient: HttpClient) { }
   ngOnInit(): void 
  {this.getAllusers(); // this is called on page load}
   getAllUsers() {
      this.HttpClient.get<User[]>('https://www.myapiurl.com/users')
          .subscribe(response => {
              this.users = response;
          },
          error => {
			console.log(error);
          }
  );
}
}

现在让我们到我们的app.component.html ，在我们的浏览器中显示用户。

<table class='table'>
<thead>
<tr>
	<th>First Name</th>
	<th>Last Name</th>
	<th>Username</th>
	<th>Email</th>
        <th>Phone Number</th>
	<th>Address</th>
</tr>
</thead>
<tbody>
<tr *ngFor ="let user of users">
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.phone_number}}</td>
<td>{{user.address}}</td>
</tr>
</tbody>
</table>

你可能已经注意到，我们在模板中使用了for..loop 。在我们的脚本中，我们定义了我们的GET方法来返回一个用户数组，为了得到一个单一的响应，我们必须运行一个循环。

在Angular中进行HTTP GET请求就是这么简单。

HTTP POST请求

我们已经看到了如何进行GET请求，让我们看看如何向外部网络服务进行POST请求。

在你的app.component.ts 脚本中，添加以下方法，我们将用它来发送数据。

import { Component, OnInit } from '@angular/core'; 
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, validators} from '@angular/forms';
@Component({
   selector: 'my-app', //
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit { 
    users: User =[];
    registerUserForm: FormGroup;
   constructor(private httpClient: HttpClient, private formBuilder: FormBuilder) { }
   ngOnInit(): void 
  {
this.register(); // this is called on page load
this.registerUserForm = this.formBuilder.group({
first_name : [''],
last_name: [''],
username: [''],
email: ['', Validators.email]
phone: [''],
address: [''],
});
}
   register() {
      this.HttpClient.post<User[]>('https://www.myapiurl.com/users', this.registeruserForm.value)
          .subscribe(response => {
              this.users = response;
          },
          error => {
			console.log(error);
          }
  );
}
}

这个脚本有一个Forms模块，用来与用户交互。我们捕获这些数据并通过register()用户方法将其提交给我们的API。POST方法需要两个参数，端点URL和我们要发送的数据，在我们的例子中是用户认证细节。

然后，我们可以继续监听API返回的响应。

总结

我们已经看到了如何向外部网络服务发出请求以及如何使用这些数据。你可以继续使用PUT、DELETE和PATCH方法进行请求。

avatar
文章
阅读
粉丝