HTTP İstekleri Yapma

HttpClient, hem veri yüklemek hem de sunucuda değişiklikler uygulamak için istek yapmak üzere kullanılan farklı HTTP fiillerine karşılık gelen yöntemlere sahiptir. Her yöntem, abone olunduğunda isteği gönderen ve ardından sunucu yanıt verdiğinde sonuçları yayınlayan bir RxJS Observable döndürür.

İstek yöntemine iletilen bir seçenekler nesnesi aracılığıyla, isteğin çeşitli özellikleri ve döndürülen yanıt türü ayarlanabilir.

JSON Verisi Alma

Bir arka uçtan veri almak genellikle HttpClient.get() yöntemi kullanılarak bir GET isteği yapmayı gerektirir. Bu yöntem iki argüman alır: veri alınacak uç nokta URL'si olan bir string ve isteği yapılandırmak için isteğe bağlı bir seçenekler nesnesi.

Örneğin, HttpClient.get() yöntemini kullanarak varsayımsal bir API'den yapılandırma verilerini almak için:

http.get<Config>('/api/config').subscribe((config) => {
  // yapılandırmayı işle.
});

Sunucu tarafından döndürülen verilerin Config türünde olacağını belirten jenerik tür argümanına dikkat edin. Bu argüman isteğe bağlıdır ve atlarsanız döndürülen veri Object türünde olacaktır.

Diğer Veri Türlerini Alma

Varsayılan olarak, HttpClient sunucuların JSON verisi döndüreceğini varsayar. JSON olmayan bir API ile etkileşim kurarken, istek yaparken HttpClient'a hangi yanıt türünü bekleyeceğini söyleyebilirsiniz. Bu, responseType seçeneği ile yapılır.

Örneğin, HttpClient'tan bir .jpeg görüntüsünün ham baytlarını bir ArrayBuffer'a indirmesini isteyebilirsiniz:

http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe((buffer) => {
  console.log('The image is ' + buffer.byteLength + ' bytes large');
});

Sunucu Durumunu Değiştirme

Sunucu API'lerinde durum değişiklikleri yapan işlemler genellikle yeni durumu veya yapılacak değişikliği belirten bir istek gövdesi ile POST istekleri yapmayı gerektirir.

HttpClient.post() yöntemi get() ile benzer şekilde davranır ve seçeneklerinden önce ek bir body argümanı kabul eder:

http.post<Config>('/api/config', newConfig).subscribe((config) => {
  console.log('Updated config:', config);
});

İsteğin body'si olarak birçok farklı türde değer sağlanabilir ve HttpClient bunları buna göre serileştirir:

URL Parametrelerini Ayarlama

İstek URL'sine dahil edilmesi gereken istek parametrelerini params seçeneğini kullanarak belirtin.

Bir nesne literali iletmek, URL parametrelerini yapılandırmanın en basit yoludur:

http
  .get('/api/config', {
    params: {filter: 'all'},
  })
  .subscribe((config) => {
    // ...
  });

Alternatif olarak, parametrelerin oluşturulması veya serileştirilmesi üzerinde daha fazla kontrole ihtiyacınız varsa bir HttpParams örneği iletin.

const baseParams = new HttpParams().set('filter', 'all');

http
  .get('/api/config', {
    params: baseParams.set('details', 'enabled'),
  })
  .subscribe((config) => {
    // ...
  });

HttpClient'ın parametreleri URL'ye nasıl kodlayacağını belirleyen özel bir HttpParameterCodec ile HttpParams'ı örnekleyebilirsiniz.

Özel Parametre Kodlaması

Varsayılan olarak, HttpParams parametre anahtarlarını ve değerlerini kodlamak ve çözmek için yerleşik HttpUrlEncodingCodec kullanır.

Kodlama ve çözmenin nasıl uygulanacağını özelleştirmek için kendi HttpParameterCodec uygulamanızı sağlayabilirsiniz.

import {HttpClient, HttpParams, HttpParameterCodec} from '@angular/common/http';
import {inject} from '@angular/core';

export class CustomHttpParamEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

export class ApiService {
  private http = inject(HttpClient);

  search() {
    const params = new HttpParams({
      encoder: new CustomHttpParamEncoder(),
    })
      .set('email', 'dev+alerts@example.com')
      .set('q', 'a & b? c/d = e');

    return this.http.get('/api/items', {params});
  }
}

Request Header'larını Ayarlama

İsteğe dahil edilmesi gereken istek başlıklarını headers seçeneğini kullanarak belirtin.

Bir nesne literali iletmek, istek başlıklarını yapılandırmanın en basit yoludur:

http
  .get('/api/config', {
    headers: {
      'X-Debug-Level': 'verbose',
    },
  })
  .subscribe((config) => {
    // ...
  });

Alternatif olarak, başlıkların oluşturulması üzerinde daha fazla kontrole ihtiyacınız varsa bir HttpHeaders örneği iletin.

const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');

http
  .get<Config>('/api/config', {
    headers: baseHeaders.set('X-Debug-Level', 'verbose'),
  })
  .subscribe((config) => {
    // ...
  });

Sunucu Response Olaylarıyla Etkileşim

Kolaylık sağlamak için, HttpClient varsayılan olarak sunucu tarafından döndürülen verinin (yanıt gövdesi) bir Observable'ını döndürür. Bazen gerçek yanıtı incelemek istenebilir, örneğin belirli yanıt başlıklarını almak için.

Tüm yanıta erişmek için observe seçeneğini 'response' olarak ayarlayın:

http.get<Config>('/api/config', {observe: 'response'}).subscribe((res) => {
  console.log('Response status:', res.status);
  console.log('Body:', res.body);
});

Ham İlerleme Olaylarını Alma

Yanıt gövdesi veya yanıt nesnesine ek olarak, HttpClient istek yaşam döngüsündeki belirli anlara karşılık gelen ham olaylar akışını da döndürebilir. Bu olaylar isteğin ne zaman gönderildiğini, yanıt başlığının ne zaman döndüğünü ve gövdenin ne zaman tamamlandığını içerir. Bu olaylar ayrıca büyük istek veya yanıt gövdeleri için yükleme ve indirme durumunu bildiren ilerleme olaylarını da içerebilir.

İlerleme olayları varsayılan olarak devre dışıdır (performans maliyeti olduğundan) ancak reportProgress seçeneği ile etkinleştirilebilir.

Olay akışını gözlemlemek için observe seçeneğini 'events' olarak ayarlayın:

http
  .post('/api/upload', myData, {
    reportProgress: true,
    observe: 'events',
  })
  .subscribe((event) => {
    switch (event.type) {
      case HttpEventType.UploadProgress:
        console.log('Uploaded ' + event.loaded + ' out of ' + event.total + ' bytes');
        break;
      case HttpEventType.Response:
        console.log('Finished uploading!');
        break;
    }
  });

Olay akışında bildirilen her HttpEvent, olayın neyi temsil ettiğini ayırt eden bir type özelliğine sahiptir:

İstek Hatalarını Yönetme

Bir HTTP isteğinin başarısız olmasının üç yolu vardır:

• Bir ağ veya bağlantı hatası, isteğin arka uç sunucusuna ulaşmasını engelleyebilir.
• Zaman aşımı seçeneği ayarlandığında istek zamanında yanıt vermeyebilir.
• Arka uç isteği alabilir ancak işlemekte başarısız olabilir ve bir hata yanıtı döndürebilir.

HttpClient yukarıdaki tüm hata türlerini, Observable'ın hata kanalı aracılığıyla döndürdüğü bir HttpErrorResponse içinde yakalar. Ağ ve zaman aşımı hataları 0 status koduna ve ProgressEvent örneği olan bir error'a sahiptir. Arka uç hataları, arka uç tarafından döndürülen başarısız status koduna ve hata yanıtını error olarak içerir. Hatanın nedenini ve hatayı ele almak için uygun eylemi belirlemek üzere yanıtı inceleyin.

RxJS kütüphanesi hata yönetimi için kullanışlı olabilecek çeşitli operatörler sunar.

Bir hata yanıtını kullanıcı arayüzü için bir değere dönüştürmek üzere catchError operatörünü kullanabilirsiniz. Bu değer kullanıcı arayüzüne bir hata sayfası veya değeri göstermesini söyleyebilir ve gerekirse hatanın nedenini yakalayabilir.

Bazen ağ kesintileri gibi geçici hatalar bir isteğin beklenmedik şekilde başarısız olmasına neden olabilir ve isteği basitçe yeniden denemek başarılı olmasını sağlayabilir. RxJS, başarısız bir Observable'a belirli koşullar altında otomatik olarak yeniden abone olan çeşitli yeniden deneme operatörleri sağlar. Örneğin, retry() operatörü otomatik olarak belirtilen sayıda yeniden abone olmayı deneyecektir.

Zaman Aşımları

Bir istek için zaman aşımı ayarlamak üzere, diğer istek seçenekleriyle birlikte timeout seçeneğini milisaniye cinsinden bir sayıya ayarlayabilirsiniz. Arka uç isteği belirtilen süre içinde tamamlanmazsa, istek iptal edilir ve bir hata yayınlanır.

http
  .get('/api/config', {
    timeout: 3000,
  })
  .subscribe({
    next: (config) => {
      console.log('Config fetched successfully:', config);
    },
    error: (err) => {
      // İstek zaman aşımına uğrarsa, bir hata yayınlanmış olacaktır.
    },
  });

Gelişmiş Fetch Seçenekleri

Angular'ın HttpClient'ı, performansı ve kullanıcı deneyimini iyileştirebilecek gelişmiş fetch API seçeneklerini destekler. Bu seçenekler, varsayılan olan fetch arka ucu kullanılırken mevcuttur.

Fetch Seçenekleri

Aşağıdaki seçenekler, fetch arka ucu kullanılırken istek davranışı üzerinde ayrıntılı kontrol sağlar.

Keep-alive Bağlantıları

keepalive seçeneği, bir isteğin onu başlatan sayfadan daha uzun yaşamasına olanak tanır. Bu, özellikle kullanıcı sayfadan ayrılsa bile tamamlanması gereken analitik veya günlükleme istekleri için kullanışlıdır.

http
  .post('/api/analytics', analyticsData, {
    keepalive: true,
  })
  .subscribe();

HTTP Önbellek Kontrolü

cache seçeneği, isteğin tarayıcının HTTP önbelleği ile nasıl etkileşime gireceğini kontrol eder ve tekrarlanan istekler için performansı önemli ölçüde iyileştirebilir.

// Tazeliğe bakılmaksızın önbelleğe alınmış yanıtı kullan
http
  .get('/api/config', {
    cache: 'force-cache',
  })
  .subscribe((config) => {
    // ...
  });

// Her zaman ağdan al, önbelleği atla
http
  .get('/api/live-data', {
    cache: 'no-cache',
  })
  .subscribe((data) => {
    // ...
  });

// Yalnızca önbelleğe alınmış yanıtı kullan, önbellekte yoksa başarısız ol
http
  .get('/api/static-data', {
    cache: 'only-if-cached',
  })
  .subscribe((data) => {
    // ...
  });

Core Web Vitals için İstek Önceliği

priority seçeneği, bir isteğin göreli önemini belirtmenize olanak tanır ve tarayıcıların daha iyi Core Web Vitals puanları için kaynak yüklemesini optimize etmesine yardımcı olur.

// Kritik kaynaklar için yüksek öncelik
http
  .get('/api/user-profile', {
    priority: 'high',
  })
  .subscribe((profile) => {
    // ...
  });

// Kritik olmayan kaynaklar için düşük öncelik
http
  .get('/api/recommendations', {
    priority: 'low',
  })
  .subscribe((recommendations) => {
    // ...
  });

// Otomatik öncelik (varsayılan) tarayıcının karar vermesine izin verir
http
  .get('/api/settings', {
    priority: 'auto',
  })
  .subscribe((settings) => {
    // ...
  });

Kullanılabilir priority değerleri:

• 'high': Yüksek öncelik, erken yüklenir (örn. kritik kullanıcı verileri, ekranın üst kısmındaki içerik)
• 'low': Düşük öncelik, kaynaklar mevcut olduğunda yüklenir (örn. analitik, ön yükleme verileri)
• 'auto': Tarayıcı, istek bağlamına göre önceliği belirler (varsayılan)

İstek Modu

mode seçeneği, isteğin çapraz köken isteklerini nasıl ele aldığını kontrol eder ve yanıt türünü belirler.

// Yalnızca aynı kökenli istekler
http
  .get('/api/local-data', {
    mode: 'same-origin',
  })
  .subscribe((data) => {
    // ...
  });

// CORS etkin çapraz köken istekleri
http
  .get('https://api.external.com/data', {
    mode: 'cors',
  })
  .subscribe((data) => {
    // ...
  });

// Basit çapraz köken istekleri için No-CORS modu
http
  .get('https://external-api.com/public-data', {
    mode: 'no-cors',
  })
  .subscribe((data) => {
    // ...
  });

Kullanılabilir mode değerleri:

• 'same-origin': Yalnızca aynı kökenli isteklere izin verir, çapraz köken isteklerinde başarısız olur
• 'cors': CORS ile çapraz köken isteklere izin verir (varsayılan)
• 'no-cors': CORS olmadan basit çapraz köken isteklere izin verir, yanıt opaktır

Yönlendirme Yönetimi

redirect seçeneği, sunucudan gelen yönlendirme yanıtlarının nasıl ele alınacağını belirtir.

// Yönlendirmeleri otomatik olarak takip et (varsayılan davranış)
http
  .get('/api/resource', {
    redirect: 'follow',
  })
  .subscribe((data) => {
    // ...
  });

// Otomatik yönlendirmeleri engelle
http
  .get('/api/resource', {
    redirect: 'manual',
  })
  .subscribe((response) => {
    // Yönlendirmeyi manuel olarak yönet
  });

// Yönlendirmeleri hata olarak ele al
http
  .get('/api/resource', {
    redirect: 'error',
  })
  .subscribe({
    next: (data) => {
      // Başarılı yanıt
    },
    error: (err) => {
      // Yönlendirme yanıtları bu hata işleyicisini tetikleyecektir
    },
  });

Kullanılabilir redirect değerleri:

• 'follow': Yönlendirmeleri otomatik olarak takip eder (varsayılan)
• 'error': Yönlendirmeleri hata olarak ele alır
• 'manual': Yönlendirmeleri otomatik olarak takip etmez, yönlendirme yanıtını döndürür

Kimlik Bilgisi Yönetimi

credentials seçeneği, çerezlerin, yetkilendirme başlıklarının ve diğer kimlik bilgilerinin çapraz köken istekleriyle gönderilip gönderilmeyeceğini kontrol eder. Bu, özellikle kimlik doğrulama senaryoları için önemlidir.

// Çapraz köken istekler için kimlik bilgilerini dahil et
http
  .get('https://api.example.com/protected-data', {
    credentials: 'include',
  })
  .subscribe((data) => {
    // ...
  });

// Asla kimlik bilgisi gönderme (çapraz köken için varsayılan)
http
  .get('https://api.example.com/public-data', {
    credentials: 'omit',
  })
  .subscribe((data) => {
    // ...
  });

// Kimlik bilgilerini yalnızca aynı kökenli istekler için gönder
http
  .get('/api/user-data', {
    credentials: 'same-origin',
  })
  .subscribe((data) => {
    // ...
  });

// withCredentials, credentials ayarını geçersiz kılar
http
  .get('https://api.example.com/data', {
    credentials: 'omit', // Bu göz ardı edilecek
    withCredentials: true, // Bu credentials: 'include' olarak zorlar
  })
  .subscribe((data) => {
    // İstek, credentials: 'omit' olmasına rağmen kimlik bilgilerini dahil edecek
  });

// Eski yaklaşım (hâlâ destekleniyor)
http
  .get('https://api.example.com/data', {
    withCredentials: true,
  })
  .subscribe((data) => {
    // credentials: 'include' ile eşdeğer
  });

Kullanılabilir credentials değerleri:

• 'omit': Kimlik bilgilerini asla göndermez
• 'same-origin': Kimlik bilgilerini yalnızca aynı kökenli istekler için gönderir (varsayılan)
• 'include': Çapraz köken istekler dahil her zaman kimlik bilgilerini gönderir

Referrer (Yönlendiren)

referrer seçeneği, istekle birlikte hangi yönlendiren bilgisinin gönderileceğini kontrol etmenize olanak tanır. Bu, gizlilik ve güvenlik açısından önemlidir.

// Belirli bir referrer URL'si gönder
http
  .get('/api/data', {
    referrer: 'https://example.com/page',
  })
  .subscribe((data) => {
    // ...
  });

// Mevcut sayfayı referrer olarak kullan (varsayılan davranış)
http
  .get('/api/analytics', {
    referrer: 'about:client',
  })
  .subscribe((data) => {
    // ...
  });

referrer seçeneği şunları kabul eder:

• Geçerli bir URL string: Gönderilecek belirli yönlendiren URL'sini ayarlar
• Boş bir string '': Yönlendiren bilgisi göndermez
• 'about:client': Varsayılan yönlendireni (mevcut sayfa URL'si) kullanır

Referrer Politikası

referrerPolicy seçeneği, ne kadar yönlendiren bilgisinin (isteği yapan sayfanın URL'si) bir HTTP isteğiyle birlikte gönderileceğini kontrol eder. Bu ayar hem gizlilik hem de analitikleri etkiler ve veri görünürlüğü ile güvenlik değerlendirmeleri arasında denge kurmanıza olanak tanır.

// Mevcut sayfadan bağımsız olarak referrer bilgisi gönderme
http
  .get('/api/data', {
    referrerPolicy: 'no-referrer',
  })
  .subscribe();

// Yalnızca kökeni gönder (örn. https://example.com)
http
  .get('/api/analytics', {
    referrerPolicy: 'origin',
  })
  .subscribe();

referrerPolicy seçeneği şunları kabul eder:

• 'no-referrer' Referer başlığını asla göndermez.
• 'no-referrer-when-downgrade' Aynı köken ve güvenli (HTTPS->HTTPS) istekler için yönlendireni gönderir, ancak güvenli bir kökenden daha az güvenli bir kökene (HTTPS->HTTP) geçerken atlar.
• 'origin' Yönlendirenin yalnızca kökenini (şema, ana bilgisayar, port) gönderir, yol ve sorgu bilgilerini atlar.
• 'origin-when-cross-origin' Aynı köken istekler için tam URL gönderir, ancak çapraz köken istekler için yalnızca kökeni gönderir.
• 'same-origin' Aynı köken istekler için tam URL gönderir ve çapraz köken istekler için yönlendiren göndermez.
• 'strict-origin' Yalnızca kökeni gönderir ve yalnızca protokol güvenlik seviyesi düşürülmemişse (örn. HTTPS->HTTPS). Düşürmede yönlendireni atlar.
• 'strict-origin-when-cross-origin' Varsayılan tarayıcı davranışı. Aynı köken istekler için tam URL, düşürülmemiş çapraz köken istekler için köken gönderir ve düşürmede yönlendireni atlar.
• 'unsafe-url' Her zaman tam URL'yi (yol ve sorgu dahil) gönderir. Bu hassas verileri açığa çıkarabilir ve dikkatli kullanılmalıdır.

Bütünlük (Integrity)

integrity seçeneği, beklenen içeriğin kriptografik özetini sağlayarak yanıtın değiştirilmediğini doğrulamanıza olanak tanır. Bu, özellikle CDN'lerden betik veya diğer kaynakları yüklerken kullanışlıdır.

// SHA-256 özetiyle yanıt bütünlüğünü doğrula
http
  .get('/api/script.js', {
    integrity: 'sha256-ABC123...',
    responseType: 'text',
  })
  .subscribe((script) => {
    // Betik içeriği özete göre doğrulanır
  });

HTTP Observable'lar

HttpClient üzerindeki her istek yöntemi, istenen yanıt türünün bir Observable'ını oluşturur ve döndürür. HttpClient kullanırken bu Observable'ların nasıl çalıştığını anlamak önemlidir.

HttpClient, RxJS'in "soğuk" Observable'lar dediği şeyi üretir, yani Observable'a abone olunana kadar gerçek bir istek yapılmaz. Ancak o zaman istek sunucuya gönderilir. Aynı Observable'a birden fazla kez abone olmak birden fazla arka uç isteğini tetikler. Her abonelik bağımsızdır.

Abone olduktan sonra, abonelikten çıkmak devam eden isteği iptal eder. Bu, Observable'a async pipe aracılığıyla abone olunmuşsa çok kullanışlıdır, çünkü kullanıcı mevcut sayfadan ayrıldığında isteği otomatik olarak iptal eder. Ek olarak, Observable'ı switchMap gibi bir RxJS birleştiricisi ile kullanırsanız, bu iptal eski istekleri temizler.

Yanıt döndüğünde, HttpClient'tan gelen Observable'lar genellikle tamamlanır (ancak yakalayıcılar bunu etkileyebilir).

Otomatik tamamlama nedeniyle, HttpClient abonelikleri temizlenmezse genellikle bellek sızıntısı riski yoktur. Ancak, herhangi bir asenkron işlemde olduğu gibi, abonelik geri çağrısının aksi takdirde çalışıp yok edilmiş bileşenle etkileşime girmeye çalıştığında hatalarla karşılaşabileceğinden, onları kullanan bileşen yok edildiğinde abonelikleri temizlemenizi şiddetle öneriyoruz.

En İyi Uygulamalar

HttpClient doğrudan bileşenlerden enjekte edilip kullanılabilse de, genellikle veri erişim mantığını izole eden ve kapsülleyen yeniden kullanılabilir, enjekte edilebilir servisler oluşturmanızı öneririz. Örneğin, bu UserService bir kullanıcıyı id'sine göre veri isteme mantığını kapsüller:

@Service()
export class UserService {
  private http = inject(HttpClient);

  getUser(id: string): Observable<User> {
    return this.http.get<User>(`/api/user/${id}`);
  }
}

Bir bileşen içinde, veri yalnızca yüklenmesi tamamlandığında kullanıcı arayüzünü oluşturmak için @if ile async pipe'ı birleştirebilirsiniz:

import {AsyncPipe} from '@angular/common';

@Component({
  imports: [AsyncPipe],
  template: `
    @if (user$ | async; as user) {
      <p>Name: {{ user.name }}</p>
      <p>Biography: {{ user.biography }}</p>
    }
  `,
})
export class UserProfile {
  userId = input.required<string>();
  user$!: Observable<User>;

  private userService = inject(UserService);

  constructor(): void {
    effect(() => {
      this.user$ = this.userService.getUser(this.userId());
    });
  }
}