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.

Ş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

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.

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

Ş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.

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;

Basit bir class oluşturduk, import etmeyi unutmuyoruz.

get fonkiyonumuzu yazalım.

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,

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.

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

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

İyi kodlamalar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir