Angular网络请求
在Angular应用中，网络请求是常见的需求，用于从服务器获取数据或向服务器发送数据。Angular提供了多种方式来处理网络请求，比较常用的是HttpClient模块。
下面描述的是掌握Angular网络请求的基本步骤和概念：
1. 引入HttpClientModule
首先，我们需要在Angular应用的根模块（通常是app.module.ts）中导入HttpClientModule。因为这是使用HttpClient服务的前提。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule // 引入HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2. 注入HttpClient服务
在组件或服务中，需要通过Angular的依赖注入系统（DI）来注入HttpClient服务。这能够让我们在组件或者服务的方法中使用HttpClient来发起HTTP请求。
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) { } // 可以在这里添加使用HttpClient的方法
}
3. 发起HTTP请求
使用HttpClient，可以发起GET、POST、PUT、DELETE等HTTP请求。每个方法都返回一个Observable对象，使用RxJS操作符（如subscribe）来处理异步响应。
示例：GET请求
fetchData() {
this.http.get('https://api.example.com/data')
.subscribe(
data => {
console.log('Success:', data);
},
error => {
console.error('Error:', error);
});
}
示例：POST请求
postData() {
const body = { name: 'Angular', version: '18' };
this.http.post('https://api.example.com/data', body)
.subscribe(
data => {
console.log('Success:', data);
},
error => {
console.error('Error:', error);
});
}
4. 处理HTTP错误
当HTTP请求失败时，subscribe方法的第二个回调函数会被调用。
这是subscribe方法的一个典型用法，包括处理成功的响应和错误响应
import { Component, OnInit } from '@angular/core';
import { YourService } from './your.service'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit { constructor(private yourService: YourService) {} ngOnInit() { this.yourService.getData().subscribe( (data: any) => { // 处理成功的响应 console.log('Success:', data); // 更新UI，显示数据等 }, (error: any) => { // 处理错误响应 console.error('Error:', error); // 可以在这里显示错误信息给用户，例如通过弹出框或修改UI中的错误消息 }, () => { // 可选的第三个回调函数，当Observable完成时调用（无论是成功还是错误） // 可以用于清理资源等操作 console.log('Completed'); } ); }
} 在这个例子中，如果yourService.getData()方法中的HTTP请求成功，那么第一个回调函数会被调用，并且可以在这里处理成功的数据。如果HTTP请求失败（例如，由于网络问题、服务器错误等），那么第二个回调函数会被调用，并且可以在这里处理错误，比如显示一个错误消息给用户。
5. 使用拦截器
Angular的HttpClient支持拦截器（Interceptors），可以在请求或响应被then或catch处理之前拦截它们。这可以用于添加认证头、日志记录或转换请求或响应数据。
创建拦截器
要创建一个拦截器，需要实现HttpInterceptor接口，该接口定义了一个intercept方法，该方法返回一个Observable<HttpEvent<any>>。在intercept方法中，可以访问到即将发送的HTTP请求（HttpRequest），并可以修改它或基于它创建一个新的请求。同样，也可以拦截并修改响应（HttpEvent）或抛出错误。
下面是一个简单的拦截器示例，向所有发出的请求添加了一个自定义的HTTP头：
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} 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); }
}注册拦截器
创建拦截器后，需要在Angular模块（通常是AppModule）中注册它。通过在模块类的providers数组中添加拦截器的提供程序来完成，并使用HTTP_INTERCEPTORS多提供者令牌。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor'; @NgModule({ declarations: [ AppComponent // ... ], imports: [ BrowserModule, HttpClientModule // ... ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } // ... ], bootstrap: [AppComponent]
})
export class AppModule { }6. 使用RxJS操作符
由于HttpClient返回的是Observable对象，可以使用RxJS提供的各种操作符来处理响应，例如map、filter、catchError等。
map：map操作符用于将Observable发出的每个值（在这个上下文中是HttpResponse对象）投影成一个新的值。你可以使用它来提取响应体中的数据，并将其作为Observable发出的新值。
this.httpClient.get<MyDataType>('/api/data').pipe( map(response => response.data) // 假设响应体中包含一个名为data的属性
).subscribe(data => { // 处理提取的数据
});filter：虽然filter在HTTP响应处理中不是最常用的，但它可以用于基于某些条件忽略某些响应。然而，在HTTP请求的上下文中，更常见的做法是在服务层或组件层处理响应数据，而不是在Observable管道中过滤响应。
catchError：catchError操作符用于捕获Observable中的错误，并返回一个替代的结果或另一个Observable。这是处理HTTP请求中可能出现的错误（如网络问题、服务器错误等）的理想方式。
this.httpClient.get<MyDataType>('/api/data').pipe( map(response => response.data), catchError(error => { // 处理错误，例如显示错误消息 // 返回一个空的Observable，或者另一个Observable return of(null); // 返回一个包含null的Observable })
).subscribe(data => { // 即使发生错误，也会调用此处，但data可能为null
}, error => { // 实际上，由于catchError的存在，这里的error回调通常不会被调用 // 除非在catchError中重新抛出了错误
});7. 安全和CORS
当从前端应用向服务器发送请求时，可能会遇到跨源资源共享（CORS）策略的问题。确保服务器配置了适当的CORS策略，以允许Angular应用的请求。
跨源资源共享（CORS, Cross-Origin Resource Sharing）是一种机制，它允许或拒绝来自不同源（域、协议或端口）的Web页面请求资源。当Angular应用尝试从与自身不同源的服务器获取资源时（如通过HttpClient发送HTTP请求），浏览器会基于服务器的CORS策略来决定是否允许这些请求。
结束