Angular 是一种流行的前端框架，它提供了许多工具和库，使得开发者可以快速构建单页应用 (SPA)。在实际开发中，SPA 经常需要从服务器获取数据，这就需要使用异步数据请求。本文将介绍如何在 Angular SPA 中使用 HttpClient 进行异步数据请求。
HttpClient 简介
HttpClient 是一个 Angular 提供的库，用于在应用程序中进行 HTTP 请求。它提供了许多功能，如请求拦截器、响应拦截器、可观察的请求等。
在 Angular 中，HttpClient 可以通过注入来使用。要使用 HttpClient，首先需要在 app.module.ts 中导入 HttpClientModule：
// javascriptcn.com 代码示例
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
],
...
})
export class AppModule { }发送 GET 请求
要发送 GET 请求，我们可以使用 HttpClient 的 get() 方法。例如，我们可以发送一个 GET 请求获取用户列表：
// javascriptcn.com 代码示例
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get('https://api.example.com/users');
}
}在上面的代码中，我们定义了一个 UserService，它使用 HttpClient 发送 GET 请求获取用户列表。我们可以在组件中使用 UserService 来获取用户列表：
// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-users',
template: `
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
`
})
export class UsersComponent implements OnInit {
users: any[];
constructor(private userService: UserService) { }
ngOnInit() {
this.userService.getUsers().subscribe((users: any[]) => {
this.users = users;
});
}
}在上面的代码中，我们定义了一个 UsersComponent，它使用 UserService 获取用户列表，并在模板中显示用户列表。
发送 POST 请求
要发送 POST 请求，我们可以使用 HttpClient 的 post() 方法。例如，我们可以发送一个 POST 请求创建一个新用户：
// javascriptcn.com 代码示例
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
createUser(user: any) {
return this.http.post('https://api.example.com/users', user);
}
}在上面的代码中，我们定义了一个 UserService，它使用 HttpClient 发送 POST 请求创建一个新用户。我们可以在组件中使用 UserService 来创建新用户：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-create-user',
template: `
<form (ngSubmit)="onSubmit()">
<input type="text" [(ngModel)]="user.name" name="name" placeholder="Name">
<input type="email" [(ngModel)]="user.email" name="email" placeholder="Email">
<button type="submit">Create User</button>
</form>
`
})
export class CreateUserComponent {
user = { name: '', email: '' };
constructor(private userService: UserService) { }
onSubmit() {
this.userService.createUser(this.user).subscribe(() => {
console.log('User created successfully');
});
}
}在上面的代码中，我们定义了一个 CreateUserComponent，它使用 UserService 创建新用户。
使用拦截器
拦截器是一种强大的工具，它可以在请求发送之前或响应返回之后对请求进行修改。在 Angular 中，我们可以使用拦截器来添加头部、处理错误等。
例如，我们可以使用拦截器添加一个身份验证头部：
// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const authReq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
});
return next.handle(authReq);
}
}在上面的代码中，我们定义了一个 AuthInterceptor，它在请求发送之前添加了一个身份验证头部。要使用拦截器，我们需要在 app.module.ts 中提供它：
// javascriptcn.com 代码示例
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
@NgModule({
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
],
...
})
export class AppModule { }在上面的代码中，我们将 AuthInterceptor 提供给 HTTP_INTERCEPTORS，这将使拦截器在每个请求中都被调用。
总结
在本文中，我们介绍了如何在 Angular SPA 中使用 HttpClient 进行异步数据请求。我们学习了如何发送 GET 和 POST 请求，以及如何使用拦截器添加头部。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655b21fbd2f5e1655d54e4e3