HTTP Client
در انگولار، HTTP Client یک سرویس کلیدی است که امکان ارسال درخواست‌های HTTP و دریافت پاسخ‌ها از سرور را به صورت asynchronous فراهم می‌کند. این سرویس در توسعه برنامه‌های مدرن Single Page Application (SPA) اهمیت ویژه‌ای دارد زیرا اجازه می‌دهد داده‌ها بدون نیاز به بارگذاری مجدد صفحه به‌روز شوند. HTTP Client در انگولار برای انجام عملیات CRUD، ارسال داده‌های فرم، همگام‌سازی داده‌ها و تعامل با RESTful APIها به کار می‌رود.
HTTP Client در انگولار بر پایه RxJS Observables طراحی شده است، که مدیریت جریان داده‌های غیرهمزمان، کنترل خطاها و لغو درخواست‌ها را آسان می‌کند. این سرویس با مفاهیم کلیدی انگولار مانند components، مدیریت state و lifecycle hooks هم‌پوشانی دارد تا جریان داده در برنامه کنترل‌شده، بهینه و بدون رندرهای غیرضروری باشد.
در این آموزش، شما خواهید آموخت که چگونه درخواست‌های GET و POST را ارسال کنید، خطاهای HTTP را مدیریت نمایید، وضعیت‌های loading را کنترل کنید و از services و components قابل استفاده مجدد بهره ببرید. مثال‌ها مطابق با best practices انگولار نوشته شده‌اند تا عملکرد، نگهداری و امنیت برنامه حفظ شود.
مثال پایه
typescriptimport { 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)');
}
}در مثال فوق، UserListComponent استفاده پایه‌ای از HTTP Client را نشان می‌دهد. HttpClient از طریق dependency injection وارد component شده است، که این باعث می‌شود component قابل تست و modular باشد. متد fetchUsers() یک درخواست GET ارسال می‌کند و Observable
ngOnInit lifecycle hook تضمین می‌کند که درخواست HTTP پس از initialization component اجرا شود. مدیریت state در سطح component از prop drilling جلوگیری می‌کند و component را قابل استفاده مجدد می‌سازد. استفاده از RxJS operators مانند map، filter و catchError می‌تواند پردازش داده و مدیریت خطاها را بهینه‌تر کند.
مثال کاربردی
typescriptimport { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, finalize } from 'rxjs/operators';
import { of } from 'rxjs';
interface Article {
id: number;
title: string;
body: string;
}
@Component({
selector: 'app-articles',
template: ` <h2>مقالات</h2> <div *ngIf="loading">در حال بارگذاری...</div> <div *ngIf="error" class="error">{{ error }}</div> <ul> <li *ngFor="let article of articles">{{ article.title }}</li> </ul> <button (click)="refresh()">بارگذاری مجدد</button>
`,
styles: ['.error { color: red; }']
})
export class ArticlesComponent implements OnInit {
articles: Article[] = [];
loading = false;
error: string | null = null;
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.loadArticles();
}
loadArticles(): void {
this.loading = true;
this.error = null;
this.http.get<Article[]>('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)')
.pipe(
catchError(err => {
this.error = 'خطا در بارگذاری مقالات';
return of([]);
}),
finalize(() => this.loading = false)
)
.subscribe(data => this.articles = data);
}
refresh(): void {
this.loadArticles();
}
}ArticlesComponent کاربرد پیشرفته HTTP Client در پروژه‌های واقعی را نشان می‌دهد. در متد loadArticles() وضعیت‌های loading و error مدیریت می‌شوند. catchError خطاهای HTTP را کنترل کرده و fallback به صورت آرایه خالی بازمی‌گرداند تا component پایدار بماند. finalize وضعیت loading را به‌روز می‌کند. ngOnInit داده‌ها را پس از initialization بارگذاری می‌کند و refresh() امکان بارگذاری مجدد داده‌ها را فراهم می‌کند. ترکیب مدیریت state محلی و RxJS operators باعث عملکرد بالا و نگهداری آسان component می‌شود.
بهترین شیوه‌ها در انگولار شامل جدا کردن داده و UI logic، مدیریت شفاف وضعیت‌های loading و error، استفاده از Observables و ساخت service layer از طریق dependency injection است. اشتباهات رایج شامل prop drilling، mutation مستقیم state و رندرهای غیرضروری هستند. برای بهینه‌سازی عملکرد از OnPush change detection strategy استفاده کنید، subscriptionها را مدیریت کرده و درخواست‌های HTTP غیرضروری را حذف کنید. برای امنیت، از HTTPS استفاده کرده و ورودی کاربران را validate کنید. رعایت این practices باعث می‌شود برنامه‌های انگولار مبتنی بر HTTP Client مقاوم، امن و مقیاس‌پذیر باشند.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| HttpClient | سرویس ارسال درخواست‌های HTTP و دریافت پاسخ‌ها | this.http.get<User[]>('api/users') |
| Observable | نمایش جریان داده‌های غیرهمزمان | this.http.get<User[]>().subscribe(data => this.users = data) |
| catchError | مدیریت خطاهای HTTP | this.http.get('api').pipe(catchError(err => of([]))) |
| ngOnInit | اجرای کد پس از initialization component | ngOnInit() { this.loadData(); } |
| Dependency Injection | تزریق سرویس و قابل استفاده مجدد کردن component | constructor(private http: HttpClient) {} |
HTTP Client در انگولار برای مدیریت و دریافت داده‌ها ضروری است. این سرویس در ترکیب با lifecycle hooks، مدیریت state و RxJS observables، جریان داده پویا و بدون مشکل در SPAها ایجاد می‌کند. مراحل بعدی شامل یادگیری مدیریت state پیشرفته با NgRx، استفاده از operators پیشرفته RxJS و ایجاد services قابل استفاده مجدد است. رعایت best practices و بهینه‌سازی‌ها به توسعه‌دهندگان کمک می‌کند برنامه‌های مقیاس‌پذیر، قابل نگهداری و امن بسازند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود