Angular ile HTTP İşlemleri

Adı : Angular ile HTTP İşlemleri

Angular, modern web uygulamaları geliştirirken kullanılan en popüler JavaScript kütüphanelerinden biridir. Angular, etkili ve ölçeklenebilir uygulama geliştirmek için gerekli olan birçok bileşeni sağlar. Bu bileşenlerden biri, sunucuyla HTTP işlemlerini gerçekleştirmeye ve veri alışverişi yapmaya yardımcı olan HttpClient modülüdür.

Angular ile HTTP İşlemleri

Angular ile HTTP işlemleri gerçekleştirmek çok kolaydır. HttpClient modülünün en temel kullanımı şöyledir:

```typescript
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

constructor(private http: HttpClient) {}

getPosts(): Observable {
return this.http.get(this.apiUrl);
}

addPost(data): Observable {
return this.http.post(this.apiUrl, data);
}

updatePost(id, data): Observable {
return this.http.put(`${this.apiUrl}/${id}`, data);
}

deletePost(id): Observable {
return this.http.delete(`${this.apiUrl}/${id}`);
}
}
```

Bu örnek, HttpClient modülünü kullanarak HTTP GET, POST, PUT ve DELETE isteklerini gerçekleştirmek için bir DataService sınıfı göstermektedir. Bu sınıf, `https://jsonplaceholder.typicode.com/posts` API'si üzerinde çalışıyor.

Angular ile HTTP işlemleri yaparken, öncelikle HttpClient modülünü dahil etmeniz gerekir. Bu modül, Angular tarafından sağlanır ve herhangi bir ek yükleme yapmanıza gerek kalmaz.

Sonra, DataService sınıfında HttpClient sınıfını enjekte etmek için bir constructor yazmanız gerekir. Bu örnekte, construction injection kullanılmıştır.

Son olarak, HTTP işlemlerini gerçekleştiren metodları tanımlamak üzere `HttpClient.get()`, `HttpClient.post()`, `HttpClient.put()` ve `HttpClient.delete()` fonksiyonları kullanılır. Bu metodlar, bir URL ve gerekli verileri alarak bir Observable döndürür.

Angular İle HTTP İşlemlerinde Headers Kullanımı

Angular ile HTTP işlemleri gerçekleştirirken, istekleri özelleştirmek için headers kullanabilirsiniz. HttpClient modülü, header'lar için ayrı bir obje sağlar. Örneğin:

```typescript
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root',
})
export class DataService {
private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

constructor(private http: HttpClient) {}

getData(): Observable {
const headers = new HttpHeaders().set('Authorization', 'Bearer my-token');

return this.http.get(this.apiUrl, { headers });
}
}
```

Bu örnekte, HttpHeaders sınıfını kullanarak bir authorization header oluşturduk. componentDidMount() gibi yaşam döngüsü metodlarını kullanmadığımız için, bir Injectable tanımı yaptık. Bu şekilde headers nesnesini this.http.get() metoduna headers adlı bir obje olarak geçirdik.

Angular İle HTTP Interceptörleri Kullanımı

HTTP Interceptörleri, Angular ile HTTP istekleri arasında işlem yapmanın en iyi yoludur. Bu, istekleri değiştirerek veya manipüle ederek, işlem öncesi veya sonrası kontroller eklemek doğru bir yoldur.

İnterceptörlere örnek olarak, backend tarafında sıkça kullanılan authorization interceptor verilebilir. Bu interceptor, her isteği intercept ederek, header'larınıza authentication bilgisini ekleyebilir.

```typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor() {}

intercept(request: HttpRequest, next: HttpHandler) {
const authToken = 'my-token';

request = request.clone({
setHeaders: {
Authorization: `Bearer ${authToken}`,