Angular 4 – Http Service Nasıl Kullanılır?

Merhaba,

Harici verileri almak, posta göndermek vs. gibi işlemler için Http servisini kullanmaktayız. Haliyle Angular 4 uygulamalarında bu işlemler için Http servislerinden nasıl yararlanılacağını ele alacağız.

Bu makalemizde Http servislerini kullanmayı örneklendirmek için harici bir kaynak olan şu adresten veri elde etmeyi amaçlayacağız ve şimdilik örneğimizi modülümüzün varsayılan componentinde yani “app.component.ts” üzerinde gerçekleştireceğiz.

Gerekli Modüllerin İmport Edilmesi

Http servisini kullanmak için aşağıdaki modülleri ilgili sayfada(artık hangi sayfada çalışıyorsanız) import etmek gerekecektir.

1. Http;
   “@angular/http“‘den import edilecektir. Http istekleri yapmak için kullanacağımız modüldür.
2. Response;
   “@angular/http“‘den import edilecektir. Http isteğine karşılık gelen cevapları yönetmemiz için gerekli nesneleri içeren modüldür.
3. map;
   “rxjs/add/operator/map“‘den import edilecektir. Map, gelen response datayı istediğimiz bir veri tipinde ya da formatta elde etmek için kullanılır.
4. do;
   “rxjs/add/operator/do“‘den import edilecektir. Do, yapılan asenkron operasyon işlemi bittiğinde yapılacak işlemleri belirlemek için kullanılır.
5. catch;
   “rxjs/add/operator/catch“‘den import edilecektir. Süreçte karşılaşabileceğimiz olası hataları kontrol etmemizi sağlar.

Http Service Kullanımı

Http servisinin kullanımına dair aşağıda kod bloğunu inceleyebilirsiniz.

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  httpData;
  constructor(private http: Http) {

  }
  getDatas() {
    this.http.get("http://jsonplaceholder.typicode.com/users")
      .map(response => response.json())
      .subscribe(data => this.httpData = data);
  }
  ngOnInit() {
    this.getDatas();
  }
}

Yukarıdaki kod bloğuna dikkat ederseniz eğer; ilk olarak Http, Response ve map modülleri import edilmiştir. Ardından, talep neticesinde elde edilecek response datayı atamak için “httpData” adında bir değişken oluşturulmuştur. Bu değişkene bir tip belirlemememizin sebebi, talep neticesinde elde edeceğimiz response datanın hangi tipten olacağını bilmememizden kaynaklanmaktadır. Devamında “AppComponent” sınıfının yapıcı metodunda(constructer) bir Http nesnesi talep edilmiş ve bu nesne “getDatas” isimli metot içerisinde kullanılmıştır.

Şimdi “getDatas” fonksiyonu aşağı alıp yapısal olarak detaylı değerlendirelim;

  getDatas() {
    this.http.get("http://jsonplaceholder.typicode.com/users")
      .map(response => response.json())
      .subscribe(data => this.httpData = data);
  }

Constructer’dan alınan Http nesnesinin referansı üzerinden “get” metodu ile talepte bulunacağımız harici kaynağa bir request yapılmaktadır. Bu request neticesinde gelen response datanın biçimlendirmesi “map” fonksiyonuyla gerçekleştirilmekte ve lambda ifadeleriyle bu işlem sağlanmaktadır. Dikkat ederseniz elde ettiğimiz response datayı burada json formatına çevirmekteyiz. En son bu işlemlerde başarı söz konusuysa “subscribe” fonksiyonu tetiklenmekte ve içerisinde lambda expression ile elde edilen response data önceden oluşturulmuş global “httpData” isimli değişkene atanmaktadır.

Tabi tüm bu işlemleri yaparken Http, Response vs. gibi harici modülleri kullanacağımızdan dolayı bunları modülümüzün “imports” özelliğine eklememiz gerekmektedir. Bu işlem için modül sınıfının tanımlandığı “app.module.ts” dosyasına “HttpModule” isimli modülü aşağıdaki gibi import etmemiz gerekmektedir ve sadece bu modülün import edilmesi yeterlidir.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Şimdi “Laa hocaaa ‘AppComponent’ isimli componentin constructerında istenen Http parametresine ‘providers’ değeri göndermeyi unuttun llaa hocaaaa!” şeklinde kendinizi yırttığınızı duyar gibiyim 🙂 Var ki bir bildiğimiz eklemedik 😉 Eğer ki bir sebebi olmasaydı ya ilgili componentin ya da modülün “providers” özelliğine tabi ki de Http nesnesini ekleyecektim. Ama eklemeye gerek duymadım. Çüünnküü; Http global bir servis olduğu için ve tarayıcılar tarafından bu servis tanındığı için herhangi bir yerden bu nesneyi belirtmemiz gerekmemektedir. Gerekli importları yaptıktan sonra bu servise istediğiniz yerden providerse eklemeye gerek duymaksızın ulaşabilirsiniz.

Neyse… Kaldığımız yerden devam edersek eğer yapmamız gereken son adım componentte yapmış olduğumuz talep neticesinde response datayı atadığımız “httpData” nesnesini componentin html sayfası olan “app.component.html” dosyasında kullanmaktır.

<table style="width:70%;">
  <thead>
    <tr>
      <td>Name</td>
      <td>User Name</td>
      <td>E-Mail</td>
      <td>Adress</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of httpData">
      <td>{{data.name}}</td>
      <td>{{data.username}}</td>
      <td>{{data.email}}</td>
      <td style="width: 550px;">
        {{data.street}} | {{data.address.suite}} | {{data.address.zipcode}} |{{data.address.city}} | x : {{data.address.geo.lat}}
        | y : {{data.address.geo.lng}}
      </td>
    </tr>
  </tbody>
</table>

Bu şekilde html sayfamızı düzenledikten sonra uygulamayı kaydedip yayınladığımızda aşağıdaki ekran görüntüsüne benzer bir çıktıyla karşılaşıyoruz.

Ve gördüğünüz gibi Angular 4 ile Http servisleri bu şekilde kullanılmaktadır. Sonraki yazımızda Observable modülü ile servis süreçlerine asenkron bir açıdan yaklaşacağız… Tabi sizler bu makalede gezinirken ben o makalede çalışıyor olacağım 🙂

O halde görüşmek üzere dostlar…
İyi çalışmalar…