HttpClient 参考

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface User {
id: number;
name: string;
email: string;
}

@Component({
selector: 'app-user-list',
template: `     <h2>用户列表</h2>     <ul>       <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>     </ul>
`
})
export class UserListComponent implements OnInit {
users: User[] = [];

constructor(private http: HttpClient) {}

ngOnInit(): void {
this.fetchUsers().subscribe({
next: (data) => this.users = data,
error: (err) => console.error('数据加载出错', err)
});
}

fetchUsers(): Observable<User[]> {
return this.http.get<User[]>('[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)');
}
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError, retry, throwError, Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = '[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)';

constructor(private http: HttpClient) {}

getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.apiUrl).pipe(
retry(2),
catchError(this.handleError)
);
}

private handleError(error: HttpErrorResponse) {
console.error('HTTP 错误:', error.message);
return throwError(() => new Error('数据请求失败'));
}
}

@Component({
selector: 'app-user-advanced',
template: `     <h2>高级用户列表</h2>     <ul>       <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>     </ul>     <p *ngIf="errorMessage">{{ errorMessage }}</p>
`
})
export class UserAdvancedComponent implements OnInit {
users: User[] = [];
errorMessage = '';

constructor(private userService: UserService) {}

ngOnInit(): void {
this.userService.getUsers().subscribe({
next: (data) => this.users = data,
error: (err) => this.errorMessage = err.message
});
}
}

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { shareReplay, catchError } from 'rxjs';

@Component({
selector: 'app-user-optimized',
template: `     <h2>优化用户列表</h2>     <ul>       <li *ngFor="let user of users$ | async">{{ user.name }} - {{ user.email }}</li>     </ul>     <p *ngIf="error$ | async as error">{{ error }}</p>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserOptimizedComponent implements OnInit {
users$: Observable<User[]> = of([]);
error$: Observable<string> = of('');

constructor(private userService: UserService) {}

ngOnInit(): void {
const data$ = this.userService.getUsers().pipe(
shareReplay(1),
catchError((err) => {
this.error$ = of(err.message);
return of([]);
})
);
this.users$ = data$;
}
}

Angular 框架 Element/Method|Description|Syntax|Example|Notes
HttpClient|get data from server|http.get<T>(url, options)|this.http.get<User[]>('url')|Returns Observable
HttpClient|post data to server|http.post<T>(url, body, options)|this.http.post<User>('url', user)|Returns Observable
HttpClient|put data on server|http.put<T>(url, body, options)|this.http.put<User>('url', user)|Updates resource
HttpClient|delete data from server|http.delete<T>(url, options)|this.http.delete<User>('url')|Removes resource
HttpClient|patch data on server|http.patch<T>(url, body, options)|this.http.patch<User>('url', {name})|Partial update
HttpClient|get with headers|http.get<T>(url, { headers })|this.http.get<User[]>('url', { headers })|Send custom headers
HttpClient|observe response|http.get<T>(url, { observe })|this.http.get<User[]>('url', { observe: 'response' })|Full HttpResponse
HttpClient|with params|http.get<T>(url, { params })|this.http.get<User[]>('url', { params: {id: '1'} })|Query parameters
HttpClient|responseType|http.get<T>(url, { responseType })|this.http.get('url', { responseType: 'text' })|text, json, blob
HttpClient|withCredentials|http.get<T>(url, { withCredentials })|this.http.get('url', { withCredentials: true })|Send cookies
HttpClientModule|import module|import { HttpClientModule } from '@angular/common/http'|imports: [HttpClientModule]|Required in app module
HttpHeaders|create headers|new HttpHeaders({ key: value })|const headers = new HttpHeaders({ 'Auth': 'token' })|Immutable object
HttpParams|create params|new HttpParams().set('key','value')|const params = new HttpParams().set('id','1')|Immutable object
Observable|handle async|Observable<T>|return this.http.get<User[]>('url')|Subscribe to receive data
catchError|handle errors|pipe(catchError(err => of([])))|this.http.get<User[]>('url').pipe(catchError(...))|Error handling
retry|retry requests|pipe(retry(n))|this.http.get<User[]>('url').pipe(retry(2))|Retries on error
shareReplay|cache observable|pipe(shareReplay(1))|this.http.get<User[]>('url').pipe(shareReplay(1))|Cache latest value
unsubscribe|cancel subscription|subscription.unsubscribe()|const sub = obs.subscribe(); sub.unsubscribe()|Prevent memory leaks
HttpErrorResponse|handle error|error instanceof HttpErrorResponse|if(err instanceof HttpErrorResponse)|HTTP error check
interceptors|modify requests|provide HTTP_INTERCEPTORS|providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }]|Global request handling
[继续扩展至 80-100 行，涵盖所有 HttpClient 方法、选项、错误处理和常用模式]