HTTP Client
Angular'da HTTP Client, modern web uygulamalarında ve SPA'larda sunucularla veri alışverişini yönetmek için kullanılan kritik bir servistir. HTTP Client sayesinde API'lerden veri çekebilir, veri gönderebilir ve uygulamanın kullanıcı arayüzünü sayfa yenilenmeden güncelleyebilirsiniz. Bu, dinamik içerik sunan uygulamalar için temel bir gerekliliktir.
HTTP Client, RxJS tabanlı Observables ile entegre çalışır. Bu sayede veri akışlarını reaktif bir şekilde yönetebilir, hata yönetimi yapabilir, istekleri iptal edebilir ve birden fazla isteği zincirleme şekilde işleyebilirsiniz. Etkili kullanımı için Angular bileşenleri, durum yönetimi, veri akışı ve yaşam döngüsü hookları hakkında bilgi sahibi olmak gerekir.
Bu eğitimde, Angular HTTP Client kullanarak GET ve POST istekleri yapmayı, yüklenme ve hata durumlarını yönetmeyi, yeniden kullanılabilir bileşenler ve veri servisleri oluşturmayı öğreneceksiniz. Örnekler, Angular projelerinde uygulanabilir pratik senaryolar sunar ve prop drilling, gereksiz yeniden render ve durum mutasyonları gibi yaygın hatalardan kaçınmayı gösterir.
Temel Örnek
typescriptimport { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
interface Kullanici {
id: number;
isim: string;
email: string;
}
@Component({
selector: 'app-kullanici-listesi',
template: ` <h2>Kullanıcı Listesi</h2> <ul> <li *ngFor="let kullanici of kullanicilar">{{ kullanici.isim }} - {{ kullanici.email }}</li> </ul>
`
})
export class KullaniciListesiComponent implements OnInit {
kullanicilar: Kullanici[] = [];
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.kullanicilariGetir().subscribe({
next: (data) => this.kullanicilar = data,
error: (err) => console.error('Kullanıcılar yüklenirken hata oluştu', err)
});
}
kullanicilariGetir(): Observable<Kullanici[]> {
return this.http.get<Kullanici[]>('[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)');
}
}
KullaniciListesiComponent, Angular HTTP Client entegrasyonunu göstermektedir. HttpClient, dependency injection ile bileşene eklenmiş ve böylece modüler ve test edilebilir bir yapı sağlanmıştır. kullanicilariGetir() metodu GET isteği yaparak Observable
ngOnInit, bileşen yüklendiğinde isteği başlatır ve gereksiz renderları önler. Bileşenin lokal durum yönetimi, prop drilling'i önler ve bileşeni yeniden kullanılabilir kılar. Daha karmaşık senaryolarda RxJS operatörleri (map, filter, catchError) ile veri dönüştürme ve hata yönetimi yapılabilir.
Pratik Örnek
typescriptimport { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, finalize } from 'rxjs/operators';
import { of } from 'rxjs';
interface Post {
id: number;
baslik: string;
icerik: string;
}
@Component({
selector: 'app-postlar',
template: ` <h2>Postlar</h2> <div *ngIf="yukleniyor">Yükleniyor...</div> <div *ngIf="hata" class="error">{{ hata }}</div> <ul> <li *ngFor="let post of postlar">{{ post.baslik }}</li> </ul> <button (click)="tekrarYukle()">Yeniden Yükle</button>
`,
styles: ['.error { color: red; }']
})
export class PostlarComponent implements OnInit {
postlar: Post[] = [];
yukleniyor = false;
hata: string | null = null;
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.postlariGetir();
}
postlariGetir(): void {
this.yukleniyor = true;
this.hata = null;
this.http.get<Post[]>('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)')
.pipe(
catchError(err => {
this.hata = 'Postlar yüklenirken hata oluştu';
return of([]);
}),
finalize(() => this.yukleniyor = false)
)
.subscribe(data => this.postlar = data);
}
tekrarYukle(): void {
this.postlariGetir();
}
}
PostlarComponent, yüklenme ve hata durumlarını yönetir. catchError hata oluştuğunda boş bir dizi döndürürken finalize, yüklenme durumunu her zaman günceller. ngOnInit ile veri yükleme otomatik başlatılırken, tekrarYukle() ile manuel tekrar yapılabilir. Bu yaklaşım veri akışını kontrol eder, gereksiz yeniden renderları önler ve kullanıcı deneyimini artırır. RxJS ile durum yönetimi birleştiğinde, ölçeklenebilir ve sağlam bileşenler elde edilir.
HTTP Client için en iyi uygulamalar, veri mantığını UI'dan ayırmak, yüklenme ve hata durumlarını yönetmek, Observables kullanmak ve yeniden kullanılabilir servisler oluşturmak olarak özetlenebilir. Kaçınılması gereken hatalar arasında prop drilling, doğrudan durum mutasyonları ve gereksiz yeniden renderlar bulunur. Performans optimizasyonu için OnPush change detection, abonelik yönetimi ve gereksiz isteklerden kaçınmak önemlidir. Güvenlik açısından HTTPS kullanmak ve gelen verileri doğrulamak gerekir. Bu yöntemler, Angular uygulamalarını güvenli, performanslı ve sürdürülebilir kılar.
📊 Referans Tablosu
Angular Element/Concept | Description | Usage Example |
---|---|---|
HttpClient | HTTP istekleri yapmak için servis | this.http.get<Kullanici[]>('api/kullanicilar') |
Observable | Asenkron veri akışı | this.http.get<Kullanici[]>().subscribe(data => this.kullanicilar = data) |
catchError | HTTP hatalarını yönetmek | this.http.get('api').pipe(catchError(err => of([]))) |
ngOnInit | Bileşen başlatma hook'u | ngOnInit() { this.verileriYukle(); } |
Dependency Injection | Servisleri bileşene enjekte etme | constructor(private http: HttpClient) {} |
HTTP Client, Angular'da asenkron veri akışı için kritik öneme sahiptir. Lifecycle hookları, durum yönetimi ve RxJS ile birleştirildiğinde dinamik ve ölçeklenebilir SPA'lar inşa edilebilir. İleri adım olarak, NgRx ile durum yönetimi, RxJS operatörleri ve yeniden kullanılabilir servisler üzerinde çalışmak, uygulama mimarisini güçlendirir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek