Angular HttpClient kullanımı (Get,Post,Put,Delete)

Merhaba, Bugün angular HttpClient hakkında bildiklerimi sizlere aktaracağım. .

Daha önceden hazırlamış olduğunuz herhangi bir web api ile haberleşmeleri sağlamak amaçlı kullanıyoruz. Web apiler herhangi bir dil ile yazılmış olabilir.

HttpClient Kullanıcı ile istemci arasında ki haberleşmeyi sağlamak amaçlı http protokolünü kullanılır. Web apimizin hazır olduğunu farzediyoruz.
HttpClient kullanmak için öncelikle HttpClientModule’yi modul dosyamıza import etmemiz gerekiyor. AppMoldule dosyamızı açıp import ediyoruz.

Modul dosyamıza eklemeleri yaptıktan sonra nasıl kullanacağımıza bakalım.
Get ,Post,Put ve Delete kullanımı için ortak bir servis yazalım.

ng g s http

Şimdi servisimizi açıp HttpClienti tanıtmamız gerekiyor. Ayrıca isteklerimiz yapılandırmak için Headers eklememiz gerekiyor HttpClient ve HttpHeaders’ı import ediyoruz

import { HttpHeaders, HttpClient } from "@angular/common/http";

Tanımlama işlemini yaptıktan global olarak kullanacağımız için constructor’ıun içine değişken olarak tanımlıyoruz, ayrıca Headers’i sürekli kullacağımız için, Headers’i döndüren bir fonksiyon yazalım. Headers’in için token eklemek isterseniz buradan ekleyebilirsiniz

Headers’ı hazırladığımıza göre Http metotlarını yazmaya başlayalım.
Öncelikle Http Metotları hakkında biraz bilgi vermek istiyorum

GET: Bu metod sunucudan veri almak için kullanılır. GET ve POST metodları en sık kullanılan metodlar olup sunucudaki kaynaklara erişmek için kullanılırlar.

POST: Bu metod ile sunucuya veri yazdırabilirsiniz. Bu metodla istek parametreleri hem URL içinde hem de mesaj gövdesinde gönderilebilir. Sadece mesaj gövdesinin kullanımı yukarıda sayılan riskleri engelleyecektir. Tarayıcılar geri butonuna basıldığında POST isteğinin mesaj gövdesinde yer alan parametreleri tekrar göndermek isteyip istemedimizi sorarlar. Bunun temel nedeni bir işlemi yanlışlıkla birden fazla yapmayı engellemektir. Bu özellik ve de güvenlik gerekçeleriyle bir işlem gerçekleştirileceğinde POST metodunun kullanılması önerilir.

PUT: Bu metod ile servis sağlayıcı üzerindeki bir kaynağı güncelleyebilirsiniz. Hangi kaynağı güncelleyecekseniz o kaynağın id’sini göndermek zorunludur.

DELETE: Bu metod ile sunucudaki herhangi bir veriyi silebilirsiniz.

Ayrıca HEAD , CONNECT , OPTIONS , TRACE , PATCH , SEARCH metotları da bulunuyor fakat yukarıda tanımlarını yaptığım 4 metodu kullanacağız.

Yaptığımız http çağırısı sonucu bize bir response döner.Ben Angular da kullanım kolaylığı açısında response’u model olarak tanıtıp dönüş değerini response modele map’lemeyi tercih ediyorum. Api de hazırlamış olduğunuz response model ile aynı modeli tanıtmamız gerekiyor.

export class ResponseModel {
    code:string;
    data:Object;
    errors:string;
    message:string;
    success:boolean;
}

Benim kullandığım response model bu şekilde. Modelimizi yani classımızı oluşturduk. Response modeli import etmeyi unutmuyoruz

import { ResponseModel } from './ResponseModel';

Şimdi her bir http metodu için fonksiyon yazalım.

Http metotlarını kullanırken host’u tanımlamamız veya fonksiyonu içine göndermemiz gerekiyor. Farklı apilerden çağrı yapabileceğimiz için ben fonksiyonlara parametre olarak göndermeyi tercih ediyorum. Ayrıca Get için parametre örn: …/api?id=1 Post Delete ve Put için datalar göndermemiz gerekiyor. Bunları da dışarıdan alacağımız için fonksiyona parametre olarak tanımlıyoruz.
Fonsiyonlarımız response modeli döndürecek bu yüzden return daha önceden tanımlamış olduğumuz http değişkenini kullanarak metotlarımızı döndürüyoruz.

  Get(url, params) {
    return this.http.get<ResponseModel>(url + params, { headers: this.getHeaders() });
  }

  Post(url, data) {
    return this.http.post<ResponseModel>(url, data, { headers: this.getHeaders() })
  }

  Put(url, data) {
    return this.http.put<ResponseModel>(url, data, { headers: this.getHeaders() })

  }

  Delete(url, data) {
    let options = { headers: this.getHeaders(), body: data };
    return this.http.delete(url, options);
  }

Evet fonksiyonlarımızı yazdık, headers’imizi de ekledik http metotlarımız bu kadar.
Şimdi bu servisi nasıl kullanacağımıza bakalım. app.component.ts dosyasını açıyoruz.
Yazmış olduğumuz httpService’i import ediyoruz ve constructor’da tanımlıyoruz. Ayrıca apimizin bulunduğu path’i değişken olarak tanımlıyoruz. Bunun farklı yöntemleri var, bütün apileri içeren bir yapı oluşturabilirsiniz, şimdilik değişken olarak tanıtacağım.

Yapımız hazır. Web apiden Kullanıcılar adlı bir tabloyu çekeceğimizi farzedelim,. Kullanıcıların modelini oluşturmamız gerekiyor. Böylece Angular’ı MVC yapısına uygun bir şekilde tasarlamış oluyoruz.

Modelimizi oluşturuyoruz;

export class User {
    id:number;
    firstName:string;
    lastName:string
}

Basit bir class oluşturduk, import etmeyi unutmuyoruz.

import {User} from './User';

get fonkiyonumuzu yazalım.

user:User;  
getUsers(id:number){
    let params = "?id=1&isActive=true";
      this.httpService.Get(this.path,params).subscribe(
        res=>{
          this.user=res.data as User;
      },err=>{
        console.log(err);
      });
  }

getUser adında bir fonksiyon yazdık. Bu fonksiyona host’u ve parametreleri gönderdik. Dönüş değerini alabilmemiz için abone olmamız yani subscribe olmamız gerekiyor. Subscribe olduktan sonra response model hatasız bir şekilde dönerse bize res adında ki değişken(ResponseModel) içerisinden data kısmını alıp yukarıda tanımladığımız user değişkenine map ediyoruz. Böylece user.firsName veya diğer bilgilere kolayca erişebiliyoruz.

Şimdi sırada post işlemi var,

postUser:User;
  postUsers(data){
    this.httpService.Post(this.path+"post",data).subscribe(res=>{
        this.postUser=res.data as User;
    },err=>{
        console.log(err);
    })
  }

post metodumuza datayı ve hostu gönderdik, api tarafında post edilen yani eklenen datanın id’sini isteyebiliriz. Bu yüzden postUser diye bir değişken tanımlayıp post edildikten sonra geriye dönen değere mapladik.

Put işlemini de aynı şekilde yapıyoruz.

  putUser: User;
  putUsers(data) {
    this.httpService.Put(this.path + "put", data).subscribe(
      (res) => {
        this.putUser = res.data as User;
      },
      (err) => {
        console.log(err);
      }
    );
  }

Aynı şekilde Delete işlemini de benzer şekilde yazıyoruz

  deleteUseres(data) {
    this.httpService.Delete(this.path + "delete", data).subscribe(
      (res) => {
      },
      (err) => {
        console.log(err);
      }
    );
  }

Böylece MVC yapısına uygun olarak HttpClient’i kullandık.

İyi kodlamalar

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir