Angular Academy · Ders

İşlevsel Araya Giriciler

İşlevsel araya giricilerle istekleri yakalayın

İşlevsel Araya Giriciler, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

interceptor nedir

Bir HTTP interceptor, uygulamanız ile ağ arasında bulunur. Her istek ve yanıt bundan geçer; böylece üst bilgileri ekleyebilir, kayıt tutabilir, dönüştürebilir, yeniden deneyebilir veya hataları tek bir merkezi yerde ele alabilirsiniz.

HttpInterceptorFn

Modern Angular, işlev tabanlı interceptor'lar kullanır: bir HttpInterceptorFn, isteği ve bir next işleyicisini alır ve HTTP olaylarından oluşan bir observable döndürür.

import { HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

withInterceptors ile kaydetme

Interceptor'ları uygulama yapılandırmanızda provideHttpClient(withInterceptors([...])) aracılığıyla sağlayın.

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

next işleyicisi

İsteği zincir boyunca iletmek için next(req) çağrısını yapın. Döndürdüğünüz değer istek akışına dönüşür; next'i çağırmamak, isteğin hiç gönderilmemesi anlamına gelir.

İstekler değişmezdir

HttpRequest değişmezdir. İsteği değiştirmek için değişikliklerinizle birlikte clone() oluşturmalı ve bu kopyayı next'e iletmelisiniz.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

Birden çok interceptor'ı zincirleme

Interceptor'lar listelenme sırasına göre çalışır. Her biri kendinden sonrakini sarar; bu nedenle dizi bir işlem hattı oluşturur: ilk interceptor isteği ilk görür, yanıtı ise son görür.

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

Interceptor'ların içinde inject() kullanma

İşlev tabanlı interceptor'lar bir enjeksiyon bağlamında çalışır; bu nedenle servisleri doğrudan inject() ile alabilirsiniz.

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

Yanıtı inceleme

Yanıtları gözlemlemek için döndürülen akışa bağlanın; örneğin zamanlama veya kayıt tutma amacıyla.

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

Koşullu interceptor kullanımı

Mantığı seçerek uygulamak için istek URL'sine veya yöntemine göre dallanabilirsiniz.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

İşlev tabanlı ve sınıf tabanlı interceptor'lar

İşlev tabanlı interceptor'lar, eski sınıf tabanlı HttpInterceptor'ın yerini alır. Daha basittir, tree-shakable'dır, test edilmeleri kolaydır ve DI belirteçleri olmadan kaydedilirler.

DI tabanlı interceptor'larla birlikte çalışabilirlik

Eski sınıf tabanlı interceptor'ları kullanmanız gerekiyorsa withInterceptorsFromDi() bunları bağlar. Yeni kodlarda işlev tabanlı interceptor'ları tercih edin.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

Hızlı Kontrol

İşlev tabanlı interceptor'lar hakkındaki anlayışınızı test edin.

Özet: İşlev Tabanlı Interceptor'lar

Interceptor'lar, HTTP'ye özgü ortak mantığı merkezileştirir.

HttpInterceptorFn: (req, next) => Observable.
withInterceptors([...]) ile kaydedin.
İstekleri değiştirmek için kopyalayın; devam etmek için next'i çağırın.
Servisler için inject() kullanın.

Sırada: kimlik doğrulama üst bilgileri ekleme.

Sıkça Sorulan Sorular

“İşlevsel Araya Giriciler” dersi ücretsiz mi?

Evet — “İşlevsel Araya Giriciler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“İşlevsel Araya Giriciler” dersinde ne öğreneceğim?

İşlevsel araya giricilerle istekleri yakalayın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“İşlevsel Araya Giriciler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön