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策略来决定是否允许这些请求。

结束