{"id":35376,"date":"2025-11-29T00:40:49","date_gmt":"2025-11-28T21:40:49","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35376"},"modified":"2025-11-29T00:40:49","modified_gmt":"2025-11-28T21:40:49","slug":"angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/","title":{"rendered":"Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f"},"content":{"rendered":"

<\/p>\n

Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f<\/h2>\n

Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir \u00e7er\u00e7evedir. Bu uygulamalar\u0131n \u00e7o\u011fu, verileri arka u\u00e7 sunucular\u0131ndan almak, g\u00f6ndermek, g\u00fcncellemek veya silmek i\u00e7in HTTP istekleri yapmak zorundad\u0131r. \u0130\u015fte tam bu noktada Angular’\u0131n HttpClient<\/code> mod\u00fcl\u00fc devreye girer. HttpClient<\/code>, Angular uygulamalar\u0131nda sunucu ile ileti\u015fim kurmak i\u00e7in tasarlanm\u0131\u015f modern, g\u00fc\u00e7l\u00fc ve esnek bir API sa\u011flar. Bu makalede, HttpClient<\/code>‘\u0131n ne oldu\u011funu, neden kullan\u0131lmas\u0131 gerekti\u011fini, temel kullan\u0131m\u0131ndan ileri seviye \u00f6zelliklerine kadar her y\u00f6n\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

HttpClient Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h3>\n

Web uygulamalar\u0131, genellikle bir veri kayna\u011f\u0131na (API) ihtiya\u00e7 duyar. Bu veri kayna\u011f\u0131 ile ileti\u015fim kurmak i\u00e7in HTTP protokol\u00fc kullan\u0131l\u0131r. Geleneksel JavaScript’te bu i\u015flemler XMLHttpRequest<\/code> veya daha modern fetch<\/code> API ile yap\u0131labilir. Ancak bu y\u00f6ntemlerin her biri, hata y\u00f6netimi, istek\/cevap d\u00f6n\u00fc\u015f\u00fcmleri, kesi\u015fim noktalar\u0131 (interceptors) ve test edilebilirlik gibi konularda geli\u015ftiricilere ek y\u00fckler getirir.<\/p>\n

Angular’\u0131n HttpClient<\/code> mod\u00fcl\u00fc, bu zorluklar\u0131 a\u015fmak ve HTTP ileti\u015fimini daha kolay, g\u00fcvenli ve y\u00f6netilebilir hale getirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. @angular\/common\/http<\/code> paketinin bir par\u00e7as\u0131 olan HttpClient<\/code>, a\u015fa\u011f\u0131daki temel avantajlar\u0131 sunar:<\/p>\n

* RxJS Entegrasyonu:<\/strong> HttpClient<\/code>, istekleri Observable olarak d\u00f6nd\u00fcr\u00fcr. Bu, RxJS’in g\u00fc\u00e7l\u00fc operat\u00f6rlerini kullanarak asenkron veri ak\u0131\u015flar\u0131n\u0131 kolayca y\u00f6netmenizi, d\u00f6n\u00fc\u015ft\u00fcrmenizi ve hatalar\u0131 ele alman\u0131z\u0131 sa\u011flar.
\n* Tip G\u00fcvenli\u011fi:<\/strong> TypeScript ile tam entegrasyon sayesinde, istek ve cevap verileri i\u00e7in g\u00fc\u00e7l\u00fc tip g\u00fcvenli\u011fi sa\u011flayabilirsiniz. Bu, geli\u015ftirme s\u0131ras\u0131nda hatalar\u0131 yakalamaya yard\u0131mc\u0131 olur.
\n* Interceptor Deste\u011fi:<\/strong> \u0130stek ve cevaplar\u0131 merkezi bir noktadan yakalay\u0131p de\u011fi\u015ftirmeye olanak tan\u0131yan interceptor’lar (kesiciler) sayesinde, kimlik do\u011frulama token’\u0131 ekleme, hata y\u00f6netimi veya loglama gibi i\u015flemleri kolayca yapabilirsiniz.
\n* Geli\u015fmi\u015f Hata Y\u00f6netimi:<\/strong> HTTP hatalar\u0131n\u0131 (\u00f6rne\u011fin, 404 Not Found, 500 Internal Server Error) ve a\u011f hatalar\u0131n\u0131 daha tutarl\u0131 bir \u015fekilde ele almak i\u00e7in g\u00fc\u00e7l\u00fc mekanizmalar sunar.
\n* Test Edilebilirlik:<\/strong> HttpClientTestingModule<\/code> ve HttpTestingController<\/code> gibi ara\u00e7lar sayesinde HTTP isteklerini kolayca mock’layabilir ve bile\u015fenlerinizi veya servislerinizi test edebilirsiniz.
\n* \u0130stek \u0130ptali:<\/strong> RxJS’in g\u00fcc\u00fc sayesinde, devam eden bir HTTP iste\u011fini kolayca iptal edebilirsiniz. Bu, \u00f6zellikle kullan\u0131c\u0131 navigasyonu veya h\u0131zl\u0131 arama \u00e7ubuklar\u0131 gibi senaryolarda kaynak israf\u0131n\u0131 \u00f6nler.<\/p>\n

Bu avantajlar, HttpClient<\/code>‘\u0131 Angular uygulamalar\u0131nda sunucu ile etkile\u015fim kurmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirir.<\/p>\n

HttpClient Kurulumu ve Temel Kullan\u0131m<\/h3>\n

HttpClient<\/code>‘\u0131 kullanmaya ba\u015flamak olduk\u00e7a basittir. \u0130lk ad\u0131m, mod\u00fcl\u00fc Angular uygulaman\u0131z\u0131n ana mod\u00fcl\u00fcne (genellikle AppModule<\/code>) dahil etmektir.<\/p>\n

HttpClientModule’\u00fc Dahil Etme<\/h4>\n

src\/app\/app.module.ts<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve HttpClientModule<\/code>‘\u00fc imports<\/code> dizisine ekleyin:<\/p>\n

import { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { HttpClientModule } from '@angular\/common\/http'; \/\/ Buray\u0131 ekleyin\n\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpClientModule \/\/ Buray\u0131 da ekleyin\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n
Bu ad\u0131m, HttpClient<\/code> servisinin uygulaman\u0131z\u0131n herhangi bir yerinde enjekte edilebilir hale gelmesini sa\u011flar.<\/p>\n
HttpClient Servisini Enjekte Etme<\/h4>\n
HttpClient<\/code>‘\u0131 kullanmak istedi\u011finiz herhangi bir bile\u015fen veya serviste, servisi constructor’\u0131na enjekte etmeniz yeterlidir:<\/p>\n
import { Component, OnInit } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\n\ninterface Post {\n  userId: number;\n  id: number;\n  title: string;\n  body: string;\n}\n\n@Component({\n  selector: 'app-data',\n  template: \n    
Veri Listesi<\/h2>\n    
    \n      
  • {{ post.title }}<\/li>\n    <\/ul>\n    
    {{ error }}<\/p>\n  <\/code>\n})\nexport class DataComponent implements OnInit {\n  posts: Post[] = [];\n  error: string | null = null;\n  private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/posts';\n\n  constructor(private http: HttpClient) { }\n\n  ngOnInit(): void {\n    this.getPosts();\n  }\n\n  getPosts(): void {\n    this.http.get(this.apiUrl)\n      .subscribe({\n        next: (data) => {\n          this.posts = data;\n        },\n        error: (err) => {\n          console.error('API Hatas\u0131:', err);\n          this.error = 'Veriler y\u00fcklenirken bir hata olu\u015ftu.';\n        }\n      });\n  }\n}<\/code><\/pre>\n
    Yukar\u0131daki \u00f6rnekte, DataComponent<\/code>‘\u0131n constructor’\u0131na HttpClient<\/code> enjekte edilmi\u015ftir. getPosts()<\/code> metodu, HttpClient<\/code>‘\u0131n get()<\/code> metodunu kullanarak bir HTTP GET iste\u011fi yapar. subscribe()<\/code> metodu, Observable’dan gelen veriyi dinlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
    Temel HTTP Metotlar\u0131<\/h4>\n
    HttpClient<\/code>, yayg\u0131n olarak kullan\u0131lan t\u00fcm HTTP metotlar\u0131n\u0131 destekler:<\/p>\n
    GET \u0130stekleri<\/h3>\n
    Veri almak i\u00e7in kullan\u0131l\u0131r. En basit haliyle, bir URL’ye istek g\u00f6nderir ve cevab\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\n
    \/\/ T\u00fcm g\u00f6nderileri al\nthis.http.get(this.apiUrl).subscribe(data => this.posts = data);\n\n\/\/ Belirli bir g\u00f6nderiyi ID ile al\nthis.http.get(${this.apiUrl}\/1<\/code>).subscribe(post => console.log(post));\n\n\/\/ Query parametreleri ile\nthis.http.get(this.apiUrl, { params: { userId: '1' } })\n  .subscribe(data => console.log('User 1 posts:', data));\n\n\/\/ HTTP Ba\u015fl\u0131klar\u0131 ile\nconst headers = new HttpHeaders().set('Authorization', 'Bearer my-auth-token');\nthis.http.get(this.apiUrl, { headers: headers })\n  .subscribe(data => console.log('Posts with custom headers:', data));<\/code><\/pre>\n
    get<\/code> ifadesi, cevab\u0131n Post<\/code> aray\u00fcz\u00fcne sahip bir dizi olaca\u011f\u0131n\u0131 belirtir, bu da tip g\u00fcvenli\u011fi sa\u011flar.<\/p>\n
    POST \u0130stekleri<\/h3>\n
    Yeni bir kaynak olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. \u0130stek g\u00f6vdesinde (request body) olu\u015fturulacak veriyi g\u00f6nderir.<\/p>\n
    import { HttpClient, HttpHeaders } from '@angular\/common\/http';\n\n\/\/ ...\n\nconst newPost: Post = {\n  userId: 1,\n  id: 0, \/\/ Sunucu taraf\u0131ndan atanacak\n  title: 'Yeni Ba\u015fl\u0131k',\n  body: 'Bu yeni bir g\u00f6nderinin i\u00e7eri\u011fi.'\n};\n\nthis.http.post(this.apiUrl, newPost)\n  .subscribe(response => {\n    console.log('Yeni g\u00f6nderi olu\u015fturuldu:', response);\n  });<\/code><\/pre>\n
    PUT \u0130stekleri<\/h3>\n
    Mevcut bir kayna\u011f\u0131 tamamen g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r. \u0130stek g\u00f6vdesinde g\u00fcncellenmi\u015f veriyi g\u00f6nderir.<\/p>\n
    const updatedPost: Post = {\n  userId: 1,\n  id: 1,\n  title: 'G\u00fcncellenmi\u015f Ba\u015fl\u0131k',\n  body: 'Bu g\u00f6nderi i\u00e7eri\u011fi g\u00fcncellendi.'\n};\n\nthis.http.put(${this.apiUrl}\/1<\/code>, updatedPost)\n  .subscribe(response => {\n    console.log('G\u00f6nderi g\u00fcncellendi:', response);\n  });<\/code><\/pre>\n
    DELETE \u0130stekleri<\/h3>\n
    Belirli bir kayna\u011f\u0131 silmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
    this.http.delete(${this.apiUrl}\/1<\/code>)\n  .subscribe(() => {\n    console.log('G\u00f6nderi ba\u015far\u0131yla silindi.');\n  });<\/code><\/pre>\n
    delete<\/code> kullan\u0131lmas\u0131, silme i\u015fleminden sonra sunucudan genellikle bir i\u00e7erik d\u00f6nmedi\u011fini (bo\u015f cevap) belirtir.<\/p>\n
    RxJS ve HttpClient \u0130li\u015fkisi<\/h3>\n
    HttpClient<\/code>‘\u0131n en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri, RxJS (Reactive Extensions for JavaScript) ile olan derin entegrasyonudur. HttpClient<\/code> metodlar\u0131, do\u011frudan bir de\u011fer d\u00f6nd\u00fcrmek yerine, bir Observable<\/code> d\u00f6nd\u00fcr\u00fcr. Bir Observable<\/code>, zamanla birden fazla de\u011fer yayabilen veya tek bir de\u011fer yayd\u0131ktan sonra tamamlanabilen bir veri ak\u0131\u015f\u0131n\u0131 temsil eder. HTTP istekleri durumunda, Observable genellikle tek bir de\u011fer (sunucu cevab\u0131) yayar ve ard\u0131ndan tamamlan\u0131r.<\/p>\n
    Observable’\u0131 dinlemek i\u00e7in subscribe()<\/code> metodunu kullan\u0131r\u0131z. subscribe()<\/code> metodu, next<\/code>, error<\/code> ve complete<\/code> olmak \u00fczere \u00fc\u00e7 geri \u00e7a\u011f\u0131rma (callback) fonksiyonu alabilir:<\/p>\n
    *   next<\/code>: Observable yeni bir de\u011fer yayd\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r (HTTP cevab\u0131 geldi\u011finde).
    \n*   error<\/code>: Observable bir hata yayd\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r (HTTP iste\u011fi ba\u015far\u0131s\u0131z oldu\u011funda).
    \n*   complete<\/code>: Observable tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r (HTTP iste\u011fi ba\u015far\u0131l\u0131 bir \u015fekilde tamamland\u0131\u011f\u0131nda).<\/p>\n
    this.http.get(this.apiUrl)\n  .subscribe({\n    next: (data) => console.log('Veriler geldi:', data),\n    error: (err) => console.error('Hata olu\u015ftu:', err),\n    complete: () => console.log('\u0130stek tamamland\u0131.')\n  });<\/code><\/pre>\n
    pipe() ve RxJS Operat\u00f6rleri<\/h4>\n
    RxJS’in as\u0131l g\u00fcc\u00fc, Observable’lar\u0131 d\u00f6n\u00fc\u015ft\u00fcrmek, filtrelemek veya birle\u015ftirmek i\u00e7in kullan\u0131lan operat\u00f6rlerde yatar. pipe()<\/code> metodu, bir Observable \u00fczerinde birden fazla operat\u00f6r\u00fc zincirleme imkan\u0131 sunar.<\/p>\n
    map() Operat\u00f6r\u00fc<\/h3>\n
    Observable’dan gelen her de\u011feri d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, API’den gelen verinin belirli bir k\u0131sm\u0131n\u0131 almak veya format\u0131n\u0131 de\u011fi\u015ftirmek isteyebilirsiniz.<\/p>\n
    import { map } from 'rxjs\/operators';\n\nthis.http.get(this.apiUrl)\n  .pipe(\n    map(posts => posts.filter(post => post.userId === 1)) \/\/ Sadece userId 1 olan g\u00f6nderileri filtrele\n  )\n  .subscribe(filteredPosts => console.log('Filtrelenmi\u015f g\u00f6nderiler:', filteredPosts));<\/code><\/pre>\n
    catchError() Operat\u00f6r\u00fc<\/h3>\n
    Observable zincirindeki hatalar\u0131 yakalamak ve i\u015flemek i\u00e7in kullan\u0131l\u0131r. Bu, hata durumunda bir fallback de\u011feri d\u00f6nd\u00fcrmek veya hatay\u0131 yeniden atmak i\u00e7in idealdir.<\/p>\n
    import { catchError } from 'rxjs\/operators';\nimport { throwError, of } from 'rxjs';\n\nthis.http.get(this.apiUrl)\n  .pipe(\n    catchError(error => {\n      console.error('\u0130stek s\u0131ras\u0131nda bir hata olu\u015ftu:', error);\n      \/\/ Hatan\u0131n kullan\u0131c\u0131ya g\u00f6sterilebilecek bir versiyonunu d\u00f6nd\u00fcr\n      return throwError(() => new Error('Veriler y\u00fcklenemedi, l\u00fctfen tekrar deneyin.'));\n      \/\/ Veya bo\u015f bir dizi gibi bir fallback de\u011feri d\u00f6nd\u00fcr\n      \/\/ return of([]);\n    })\n  )\n  .subscribe({\n    next: (data) => console.log(data),\n    error: (err) => console.error('Hata yakaland\u0131 ve i\u015flendi:', err.message)\n  });<\/code><\/pre>\n
    tap() Operat\u00f6r\u00fc<\/h3>\n
    Observable ak\u0131\u015f\u0131n\u0131 etkilemeden yan etkiler (side effects) ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir iste\u011fin ba\u015flang\u0131c\u0131nda bir y\u00fckleme g\u00f6stergesi g\u00f6stermek veya loglama yapmak i\u00e7in idealdir.<\/p>\n
    import { tap } from 'rxjs\/operators';\n\nthis.http.get(this.apiUrl)\n  .pipe(\n    tap(() => console.log('API iste\u011fi ba\u015flad\u0131...')),\n    tap(data => console.log('API cevab\u0131 al\u0131nd\u0131:', data))\n  )\n  .subscribe();<\/code><\/pre>\n
    finalize() Operat\u00f6r\u00fc<\/h3>\n
    Observable tamamland\u0131\u011f\u0131nda veya bir hata ile sonland\u0131\u011f\u0131nda \u00e7al\u0131\u015fan bir callback fonksiyonudur. Genellikle bir y\u00fckleme g\u00f6stergesini kapatmak gibi temizlik i\u015flemleri i\u00e7in kullan\u0131l\u0131r.<\/p>\n
    import { finalize } from 'rxjs\/operators';\n\nthis.http.get(this.apiUrl)\n  .pipe(\n    tap(() => console.log('Y\u00fckleniyor...')),\n    finalize(() => console.log('Y\u00fckleme tamamland\u0131 veya hata olu\u015ftu, spinner kapat\u0131ld\u0131.'))\n  )\n  .subscribe();<\/code><\/pre>\n
    retry() Operat\u00f6r\u00fc<\/h3>\n
    Bir hata durumunda Observable’\u0131 belirli bir say\u0131da yeniden denemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
    import { retry } from 'rxjs\/operators';\n\nthis.http.get(this.apiUrl)\n  .pipe(\n    retry(3) \/\/ Hata durumunda 3 kez daha dene\n  )\n  .subscribe();<\/code><\/pre>\n
    Hata Y\u00f6netimi<\/h3>\n
    HTTP isteklerinde hata y\u00f6netimi kritik bir konudur. HttpClient<\/code>, HttpErrorResponse<\/code> nesnesi arac\u0131l\u0131\u011f\u0131yla detayl\u0131 hata bilgisi sa\u011flar.<\/p>\n
    HttpErrorResponse<\/code> nesnesi, a\u015fa\u011f\u0131daki gibi \u00f6nemli \u00f6zellikler i\u00e7erir:<\/p>\n
    *   error<\/code>: Hatan\u0131n ayr\u0131nt\u0131lar\u0131 (genellikle sunucudan gelen JSON hata mesaj\u0131).
    \n*   headers<\/code>: Hataya ait HTTP ba\u015fl\u0131klar\u0131.
    \n*   message<\/code>: Hatan\u0131n kullan\u0131c\u0131 dostu mesaj\u0131.
    \n*   name<\/code>: Hatan\u0131n ad\u0131.
    \n*   ok<\/code>: \u0130stek ba\u015far\u0131l\u0131 m\u0131yd\u0131 (her zaman false bir hata durumunda).
    \n*   status<\/code>: HTTP durum kodu (\u00f6rne\u011fin, 404, 500).
    \n*   statusText<\/code>: HTTP durum metni (\u00f6rne\u011fin, “Not Found”, “Internal Server Error”).
    \n*   url<\/code>: Hatan\u0131n olu\u015ftu\u011fu URL.<\/p>\n
    Hatalar genellikle iki kategoriye ayr\u0131l\u0131r:<\/p>\n
    1.  Sunucu Taraf\u0131 Hatalar\u0131 (Backend Errors):<\/strong> Sunucu, iste\u011fi i\u015flerken bir sorunla kar\u015f\u0131la\u015f\u0131r ve 4xx veya 5xx durum kodlar\u0131 ile cevap verir (\u00f6rne\u011fin, 404 Not Found, 500 Internal Server Error).
    \n2.  \u0130stemci Taraf\u0131 Hatalar\u0131 (Client-side Errors):<\/strong> A\u011f hatalar\u0131 (internet ba\u011flant\u0131s\u0131 yok), CORS politikas\u0131 ihlalleri veya istek g\u00f6nderilmeden \u00f6nce olu\u015fan hatalar (\u00f6rne\u011fin, bir JSON objesini seri hale getirememek).<\/p>\n
    catchError<\/code> operat\u00f6r\u00fc, bu hatalar\u0131 yakalamak ve i\u015flemek i\u00e7in en yayg\u0131n ve etkili y\u00f6ntemdir.<\/p>\n
    import { HttpErrorResponse } from '@angular\/common\/http';\nimport { throwError } from 'rxjs';\nimport { catchError } from 'rxjs\/operators';\n\nhandleError(error: HttpErrorResponse) {\n  let errorMessage = '';\n  if (error.error instanceof ErrorEvent) {\n    \/\/ \u0130stemci taraf\u0131 veya a\u011f hatas\u0131\n    errorMessage = Bir hata olu\u015ftu: ${error.error.message}<\/code>;\n  } else {\n    \/\/ Sunucu taraf\u0131 hatas\u0131\n    errorMessage = Sunucu hatas\u0131 - Kod: ${error.status}, Mesaj: ${error.message}<\/code>;\n    \/\/ error.error nesnesinde sunucudan gelen detayl\u0131 hata mesaj\u0131 olabilir\n    if (error.error && error.error.message) {\n      errorMessage +=  Detay: ${error.error.message}<\/code>;\n    }\n  }\n  console.error(errorMessage);\n  return throwError(() => new Error(errorMessage)); \/\/ Hata mesaj\u0131n\u0131 yeniden f\u0131rlat\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\nthis.http.get(this.apiUrl)\n  .pipe(\n    catchError(this.handleError)\n  )\n  .subscribe({\n    next: (data) => console.log(data),\n    error: (err) => alert(err.message) \/\/ Kullan\u0131c\u0131ya hata mesaj\u0131n\u0131 g\u00f6ster\n  });<\/code><\/pre>\n
    Bu merkezi handleError<\/code> fonksiyonu, hata y\u00f6netimini uygulaman\u0131z genelinde tutarl\u0131 hale getirmenize yard\u0131mc\u0131 olur.<\/p>\n
    HTTP Interceptor’lar<\/h3>\n
    HTTP Interceptor’lar, Angular’\u0131n HttpClient<\/code> mod\u00fcl\u00fcn\u00fcn en g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 \u00f6zelliklerinden biridir. Interceptor’lar, bir HTTP iste\u011fi g\u00f6nderilmeden \u00f6nce veya bir HTTP cevab\u0131 al\u0131nd\u0131ktan sonra istekleri veya cevaplar\u0131 yakalama ve de\u011fi\u015ftirme yetene\u011fi sa\u011flar. Bu, uygulaman\u0131z genelinde tekrarlayan g\u00f6revleri merkezi bir yerden y\u00f6netmek i\u00e7in m\u00fckemmel bir yoldur.<\/p>\n
    Kullan\u0131m senaryolar\u0131 \u015funlar\u0131 i\u00e7erir:<\/p>\n
    *   Kimlik Do\u011frulama (Authentication):<\/strong> Her giden iste\u011fe bir kimlik do\u011frulama token’\u0131 (\u00f6rne\u011fin, JWT) eklemek.
    \n*   Loglama:<\/strong> T\u00fcm giden istekleri ve gelen cevaplar\u0131 konsola veya bir loglama servisine kaydetmek.
    \n*   Hata Y\u00f6netimi:<\/strong> Belirli HTTP hata kodlar\u0131n\u0131 (\u00f6rne\u011fin, 401 Unauthorized) yakalay\u0131p kullan\u0131c\u0131y\u0131 giri\u015f sayfas\u0131na y\u00f6nlendirmek gibi global hata i\u015fleme mant\u0131\u011f\u0131 uygulamak.
    \n*   Y\u00fckleme G\u00f6stergeleri (Loading Spinners):<\/strong> \u0130stek ba\u015flamadan \u00f6nce bir y\u00fckleme g\u00f6stergesi g\u00f6stermek ve cevap geldi\u011finde veya hata olu\u015ftu\u011funda bu g\u00f6stergeyi gizlemek.
    \n*   API URL \u00d6n Eki:<\/strong> T\u00fcm isteklerin ba\u015f\u0131na belirli bir API URL \u00f6n eki eklemek.<\/p>\n
    Interceptor Olu\u015fturma Ad\u0131mlar\u0131<\/h4>\n
    1.  HttpInterceptor<\/code> Aray\u00fcz\u00fcn\u00fc Uygulay\u0131n:<\/strong> Yeni bir TypeScript s\u0131n\u0131f\u0131 olu\u015fturun ve HttpInterceptor<\/code> aray\u00fcz\u00fcn\u00fc implement edin. Bu aray\u00fcz, intercept()<\/code> ad\u0131nda tek bir metot tan\u0131mlar.
    \n2.  intercept()<\/code> Metodunu Uygulay\u0131n:<\/strong> Bu metot, HttpRequest<\/code> ve HttpHandler<\/code> olmak \u00fczere iki parametre al\u0131r.
    \n    *   HttpRequest<\/code>: Giden iste\u011fi temsil eder. \u0130stek objesi readonly<\/code> oldu\u011fu i\u00e7in, onu de\u011fi\u015ftirmek isterseniz request.clone()<\/code> metodunu kullanarak yeni bir kopya olu\u015fturman\u0131z gerekir.
    \n    *   HttpHandler<\/code>: \u0130ste\u011fi bir sonraki interceptor’a veya son olarak sunucuya g\u00f6ndermekten sorumludur. handle()<\/code> metodu, bir Observable<\/code> d\u00f6nd\u00fcr\u00fcr.
    \n3.  Interceptor’\u0131 Sa\u011flay\u0131n:<\/strong> Interceptor’\u0131n\u0131z\u0131 Angular’\u0131n dependency injection sistemine kaydetmek i\u00e7in HTTP_INTERCEPTORS<\/code> token’\u0131n\u0131 kullan\u0131n.<\/p>\n
    \u00d6rnek: Kimlik Do\u011frulama Interceptor’\u0131<\/h3>\n
    \/\/ src\/app\/auth.interceptor.ts\nimport { Injectable } from '@angular\/core';\nimport {\n  HttpRequest,\n  HttpHandler,\n  HttpEvent,\n  HttpInterceptor\n} from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n\n  constructor() {}\n\n  intercept(request: HttpRequest, next: HttpHandler): Observable> {\n    \/\/ LocalStorage'dan token'\u0131 al\n    const authToken = localStorage.getItem('access_token');\n\n    \/\/ E\u011fer token varsa, iste\u011fe Authorization ba\u015fl\u0131\u011f\u0131n\u0131 ekle\n    if (authToken) {\n      request = request.clone({\n        setHeaders: {\n          Authorization: Bearer ${authToken}<\/code>\n        }\n      });\n    }\n\n    \/\/ De\u011fi\u015ftirilmi\u015f iste\u011fi bir sonraki i\u015fleyiciye g\u00f6nder\n    return next.handle(request);\n  }\n}<\/code><\/pre>\n
    Interceptor’\u0131n Sa\u011flanmas\u0131<\/h3>\n
    AppModule<\/code>‘de, providers<\/code> dizisine interceptor’\u0131n\u0131z\u0131 eklemeniz gerekir:<\/p>\n
    \/\/ src\/app\/app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular\/common\/http';\n\nimport { AppComponent } from '.\/app.component';\nimport { AuthInterceptor } from '.\/auth.interceptor'; \/\/ Interceptor'\u0131 import et\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpClientModule\n  ],\n  providers: [\n    {\n      provide: HTTP_INTERCEPTORS,\n      useClass: AuthInterceptor,\n      multi: true \/\/ Birden fazla interceptor'\u0131 desteklemek i\u00e7in 'multi: true' olmal\u0131\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n
    multi: true<\/code> ayar\u0131, birden fazla interceptor’\u0131n ayn\u0131 HTTP_INTERCEPTORS<\/code> token’\u0131 i\u00e7in sa\u011flanabilece\u011fini belirtir. Interceptor’lar, providers<\/code> dizisindeki s\u0131rayla y\u00fcr\u00fct\u00fcl\u00fcr.<\/p>\n
    Di\u011fer Geli\u015fmi\u015f \u00d6zellikler ve En \u0130yi Uygulamalar<\/h3>\n
    HttpClient<\/code>, temel i\u015flevselli\u011finin \u00f6tesinde, daha karma\u015f\u0131k senaryolar\u0131 ele almak i\u00e7in \u00e7e\u015fitli geli\u015fmi\u015f \u00f6zellikler sunar.<\/p>\n
    \u0130stek Ba\u015fl\u0131klar\u0131 (HttpHeaders)<\/h4>\n
    HttpHeaders<\/code> s\u0131n\u0131f\u0131, HTTP isteklerine \u00f6zel ba\u015fl\u0131klar eklemek i\u00e7in kullan\u0131l\u0131r. Bu, kimlik do\u011frulama token’lar\u0131, i\u00e7erik tipi veya \u00f6zel API anahtarlar\u0131 g\u00f6ndermek i\u00e7in yayg\u0131n olarak kullan\u0131l\u0131r.<\/p>\n
    import { HttpHeaders } from '@angular\/common\/http';\n\nconst headers = new HttpHeaders()\n  .set('Content-Type', 'application\/json')\n  .set('X-Custom-Header', 'MyValue');\n\nthis.http.post(this.apiUrl, body, { headers: headers })\n  .subscribe(response => console.log(response));<\/code><\/pre>\n
    Query Parametreleri (HttpParams)<\/h4>\n
    URL’ye query parametreleri eklemek i\u00e7in HttpParams<\/code> s\u0131n\u0131f\u0131 kullan\u0131l\u0131r. Bu, GET isteklerinde filtreleme, s\u0131ralama veya sayfalama bilgisi g\u00f6ndermek i\u00e7in idealdir.<\/p>\n
    import { HttpParams } from '@angular\/common\/http';\n\nlet params = new HttpParams()\n  .set('page', '1')\n  .set('limit', '10')\n  .set('sort', 'title');\n\nthis.http.get(this.apiUrl, { params: params })\n  .subscribe(data => console.log('Filtered data:', data));<\/code><\/pre>\n
    \u0130stek \u0130ptali (Cancelling Requests)<\/h4>\n
    RxJS’in g\u00fcc\u00fc sayesinde, devam eden bir HTTP iste\u011fini iptal etmek m\u00fcmk\u00fcnd\u00fcr. Bu, \u00f6zellikle kullan\u0131c\u0131 h\u0131zl\u0131ca bir sayfadan di\u011ferine ge\u00e7ti\u011finde veya arama kutusuna s\u00fcrekli yeni de\u011ferler girdi\u011finde \u00f6nceki gereksiz istekleri durdurmak i\u00e7in \u00f6nemlidir. takeUntil()<\/code> veya unsubscribe()<\/code> metotlar\u0131 bu ama\u00e7la kullan\u0131l\u0131r.<\/p>\n
    import { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs\/operators';\n\n\/\/ ...\nprivate destroy$ = new Subject();\n\ngetPosts(): void {\n  this.http.get(this.apiUrl)\n    .pipe(\n      takeUntil(this.destroy$) \/\/ destroy$ yay\u0131mlad\u0131\u011f\u0131nda iste\u011fi iptal et\n    )\n    .subscribe({\n      next: (data) => this.posts = data,\n      error: (err) => console.error(err)\n    });\n}\n\nngOnDestroy(): void {\n  this.destroy$.next(); \/\/ Component yok edildi\u011finde iptal sinyali g\u00f6nder\n  this.destroy$.complete();\n}<\/code><\/pre>\n
    \u0130stek \u0130lerlemesi (Progress Events)<\/h4>\n
    HttpClient<\/code>, dosya y\u00fcklemeleri gibi durumlarda iste\u011fin ilerlemesini izlemek i\u00e7in ilerleme olaylar\u0131n\u0131 (progress events) destekler. reportProgress: true<\/code> se\u00e7ene\u011fi ile bu \u00f6zellik etkinle\u015ftirilir.<\/p>\n
    this.http.post(this.uploadUrl, formData, {\n  reportProgress: true,\n  observe: 'events' \/\/ T\u00fcm HTTP olaylar\u0131n\u0131 g\u00f6zlemle\n})\n.subscribe(event => {\n  if (event.type === HttpEventType.UploadProgress) {\n    const percentDone = Math.round(100 * event.loaded \/ event.total!);\n    console.log(Dosya y\u00fckleniyor: ${percentDone}%<\/code>);\n  } else if (event.type === HttpEventType.Response) {\n    console.log('Y\u00fckleme tamamland\u0131!', event.body);\n  }\n});<\/code><\/pre>\n
    Request Options: observe<\/code><\/h4>\n
    observe<\/code> se\u00e7ene\u011fi, HTTP cevab\u0131n\u0131n hangi k\u0131sm\u0131n\u0131n Observable taraf\u0131ndan d\u00f6nd\u00fcr\u00fclece\u011fini kontrol etmenizi sa\u011flar:<\/p>\n
    *   'body'<\/code> (varsay\u0131lan): Sadece cevap g\u00f6vdesini d\u00f6nd\u00fcr\u00fcr.
    \n*   'response'<\/code>: Tam HttpResponse<\/code> nesnesini d\u00f6nd\u00fcr\u00fcr (ba\u015fl\u0131klar, durum kodu dahil).
    \n*   'events'<\/code>: T\u00fcm HTTP olaylar\u0131n\u0131 (y\u00fckleme ilerlemesi dahil) Observable olarak d\u00f6nd\u00fcr\u00fcr.<\/p>\n
    \/\/ Tam HttpResponse nesnesini almak i\u00e7in\nthis.http.get(this.apiUrl, { observe: 'response' })\n  .subscribe(response => {\n    console.log('Status:', response.status);\n    console.log('Headers:', response.headers.get('Content-Type'));\n    console.log('Body:', response.body);\n  });<\/code><\/pre>\n
    Servis Yap\u0131s\u0131 ve Tip G\u00fcvenli\u011fi<\/h4>\n
    En iyi uygulama olarak, HttpClient<\/code> do\u011frudan bile\u015fenlerde kullan\u0131lmamal\u0131d\u0131r. Bunun yerine, API \u00e7a\u011fr\u0131lar\u0131n\u0131 y\u00f6netmek i\u00e7in ayr\u0131 servisler olu\u015fturulmal\u0131d\u0131r. Bu, kodun daha d\u00fczenli, test edilebilir ve yeniden kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, veri yap\u0131lar\u0131n\u0131 tan\u0131mlamak i\u00e7in TypeScript aray\u00fczleri veya s\u0131n\u0131flar\u0131 kullanarak tip g\u00fcvenli\u011fini sa\u011flamak \u00f6nemlidir.<\/p>\n
    \/\/ src\/app\/post.service.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpClient, HttpErrorResponse } from '@angular\/common\/http';\nimport { Observable, throwError } from 'rxjs';\nimport { catchError } from 'rxjs\/operators';\n\nexport interface Post {\n  userId: number;\n  id: number;\n  title: string;\n  body: string;\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class PostService {\n  private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/posts';\n\n  constructor(private http: HttpClient) { }\n\n  getPosts(): Observable {\n    return this.http.get(this.apiUrl)\n      .pipe(\n        catchError(this.handleError)\n      );\n  }\n\n  getPostById(id: number): Observable {\n    return this.http.get(${this.apiUrl}\/${id}<\/code>)\n      .pipe(\n        catchError(this.handleError)\n      );\n  }\n\n  createPost(post: Post): Observable {\n    return this.http.post(this.apiUrl, post)\n      .pipe(\n        catchError(this.handleError)\n      );\n  }\n\n  private handleError(error: HttpErrorResponse): Observable {\n    let errorMessage = '';\n    if (error.error instanceof ErrorEvent) {\n      errorMessage = \u0130stemci hatas\u0131: ${error.error.message}<\/code>;\n    } else {\n      errorMessage = Sunucu hatas\u0131 - Kod: ${error.status}, Mesaj: ${error.message}<\/code>;\n    }\n    console.error(errorMessage);\n    return throwError(() => new Error('Bir \u015feyler ters gitti; l\u00fctfen tekrar deneyin.'));\n  }\n}<\/code><\/pre>\n
    Bile\u015fende kullan\u0131m\u0131:<\/p>\n
    \/\/ src\/app\/post-list\/post-list.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { PostService, Post } from '..\/post.service';\n\n@Component({\n  selector: 'app-post-list',\n  templateUrl: '.\/post-list.component.html',\n  styleUrls: ['.\/post-list.component.css']\n})\nexport class PostListComponent implements OnInit {\n  posts: Post[] = [];\n  errorMessage: string | null = null;\n\n  constructor(private postService: PostService) { }\n\n  ngOnInit(): void {\n    this.postService.getPosts()\n      .subscribe({\n        next: (data) => this.posts = data,\n        error: (err) => this.errorMessage = err.message\n      });\n  }\n}<\/code><\/pre>\n
    Mocklama ve Test Etme<\/h4>\n
    Angular’\u0131n HttpClientTestingModule<\/code> ve HttpTestingController<\/code>‘\u0131, HTTP isteklerini bir arka u\u00e7 sunucusuna ger\u00e7ekten g\u00f6ndermeden test etmenizi sa\u011flar. Bu, birim testlerinizi h\u0131zl\u0131 ve g\u00fcvenilir hale getirir.<\/p>\n
    \/\/ src\/app\/post.service.spec.ts\nimport { TestBed } from '@angular\/core\/testing';\nimport { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing';\nimport { PostService, Post } from '.\/post.service';\n\ndescribe('PostService', () => {\n  let service: PostService;\n  let httpTestingController: HttpTestingController;\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [HttpClientTestingModule],\n      providers: [PostService]\n    });\n    service = TestBed.inject(PostService);\n    httpTestingController = TestBed.inject(HttpTestingController);\n  });\n\n  afterEach(() => {\n    httpTestingController.verify(); \/\/ Bekleyen istek kalmad\u0131\u011f\u0131ndan emin ol\n  });\n\n  it('should be created', () => {\n    expect(service).toBeTruthy();\n  });\n\n  it('should retrieve posts from the API via GET', () => {\n    const dummyPosts: Post[] = [\n      { userId: 1, id: 1, title: 'Test Post 1', body: 'Body 1' },\n      { userId: 1, id: 2, title: 'Test Post 2', body: 'Body 2' },\n    ];\n\n    service.getPosts().subscribe(posts => {\n      expect(posts.length).toBe(2);\n      expect(posts).toEqual(dummyPosts);\n    });\n\n    const req = httpTestingController.expectOne('https:\/\/jsonplaceholder.typicode.com\/posts');\n    expect(req.request.method).toBe('GET');\n    req.flush(dummyPosts); \/\/ Mock cevab\u0131 g\u00f6nder\n  });\n});<\/code><\/pre>\n
    G\u00fcvenlik Konular\u0131<\/h3>\n
    Web uygulamalar\u0131nda HTTP ileti\u015fimi yaparken baz\u0131 g\u00fcvenlik konular\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir:<\/p>\n
    *   CORS (Cross-Origin Resource Sharing):<\/strong> Taray\u0131c\u0131lar\u0131n farkl\u0131 kaynaklardan (domain, protokol, port) kaynaklara eri\u015fimini k\u0131s\u0131tlayan bir g\u00fcvenlik mekanizmas\u0131d\u0131r. E\u011fer API’niz farkl\u0131 bir domain’de ise, sunucu taraf\u0131nda CORS ba\u015fl\u0131klar\u0131n\u0131 do\u011fru yap\u0131land\u0131rman\u0131z gerekir.
    \n*   XSRF (Cross-Site Request Forgery):<\/strong> Sald\u0131rgan\u0131n, kullan\u0131c\u0131n\u0131n kimli\u011fini kullanarak istemci ad\u0131na istenmeyen eylemler ger\u00e7ekle\u015ftirmesini sa\u011flayan bir sald\u0131r\u0131 t\u00fcr\u00fcd\u00fcr. HttpClient<\/code>, withXsrfHeader: true<\/code> se\u00e7ene\u011fiyle XSRF korumas\u0131n\u0131 otomatik olarak sa\u011flar (Angular’\u0131n kendi XSRF token mekanizmas\u0131 ile birlikte).
    \n*   Sanitization:<\/strong> Sunucudan gelen verileri (\u00f6zellikle HTML i\u00e7eri\u011fi) do\u011frudan DOM’a eklerken dikkatli olun. G\u00fcvenlik a\u00e7\u0131\u011f\u0131 yaratabilecek komut dosyas\u0131 enjeksiyonlar\u0131n\u0131 \u00f6nlemek i\u00e7in Angular’\u0131n yerle\u015fik sanitization mekanizmalar\u0131n\u0131 kullan\u0131n veya verileri temizleyin.<\/p>\n
    Sonu\u00e7<\/h3>\n
    Angular’\u0131n HttpClient<\/code> mod\u00fcl\u00fc, modern web uygulamalar\u0131nda sunucu ile ileti\u015fim kurmak i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve geli\u015ftirici dostu bir ara\u00e7 setidir. RxJS ile entegrasyonu, g\u00fc\u00e7l\u00fc tip g\u00fcvenli\u011fi, interceptor deste\u011fi ve kapsaml\u0131 hata y\u00f6netimi yetenekleri sayesinde, HttpClient<\/code> karma\u015f\u0131k HTTP tabanl\u0131 i\u015flemleri bile basit ve y\u00f6netilebilir hale getirir.<\/p>\n
    Bu makalede, HttpClient<\/code>‘\u0131n temel kurulumundan, farkl\u0131 HTTP metotlar\u0131n\u0131n kullan\u0131m\u0131na, RxJS operat\u00f6rleriyle veri ak\u0131\u015flar\u0131n\u0131 y\u00f6netmeye, merkezi hata y\u00f6netimine ve interceptor’larla istek\/cevaplar\u0131 \u00f6zelle\u015ftirmeye kadar bir\u00e7ok y\u00f6n\u00fcn\u00fc ele ald\u0131k. Ayr\u0131ca, en iyi uygulamalar ve g\u00fcvenlik konular\u0131 hakk\u0131nda da bilgi edindik.<\/p>\n
    HttpClient<\/code>‘\u0131 do\u011fru bir \u015fekilde anlamak ve kullanmak, Angular uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131, g\u00fcvenli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. Art\u0131k, Angular projelerinizde g\u00fcvenle HTTP istekleri yapmaya haz\u0131rs\u0131n\u0131z.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f\nAngular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve ka","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-35376","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f\" \/>\n<meta property=\"og:description\" content=\"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve ka\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-28T21:40:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f\",\"datePublished\":\"2025-11-28T21:40:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\"},\"wordCount\":2192,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\",\"name\":\"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-28T21:40:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f","og_description":"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve ka","og_url":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-28T21:40:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"18 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f","datePublished":"2025-11-28T21:40:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/"},"wordCount":2192,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/","url":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/","name":"Angular'\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-28T21:40:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angularin-httpclient-modulu-temellerden-ileri-seviyeye-kapsamli-bir-giris\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular’\u0131n HttpClient Mod\u00fcl\u00fc: Temellerden \u0130leri Seviyeye Kapsaml\u0131 Bir Giri\u015f"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35376"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35376\/revisions"}],"predecessor-version":[{"id":35377,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35376\/revisions\/35377"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}