Angular Promise Kullanımı

Merhaba arkadaşlar, bu yazımda sizlere Angular Promise Kullanımı konusundan bahsedeceğim.

Angular, asenkron işlemleri yönetmek için Promise yapısını kullanır. Bu blog yazısında, Angular’da Promise yapısının nasıl kullanıldığını ve asenkron işlemlerin nasıl yönetildiğini uygulama örneği ile birlikte öğreneceğiz.

1. Promise Yapısı Nedir?
   • Promise, asenkron işlemleri yönetmek ve sonuçlarını almak için kullanılan bir JavaScript özelliğidir.
2. Angular Projesinde Promise Kullanımı
   • Angular projenizde Promise kullanmak için HttpClient servisini kullanabilirsiniz.
3. HTTP İsteği
   • HttpClient servisiyle HTTP isteği yapmak için http.get() veya http.post() gibi yöntemleri kullanabilirsiniz.
   • Bu yöntemler, bir Promise döndürür.
4. Promise Sonuçlarını Yakalama
   • .then() ve .catch() gibi Promise yöntemlerini kullanarak sonuçları yakalayabilirsiniz.
   • .then() bloğunda başarılı durumları işleyebilirsiniz.
   • .catch() bloğunda hata durumlarını ele alabilirsiniz.
5. Örnek Uygulama
   • Basit bir örnek uygulama oluşturarak bir Promise işlemlerimizi ve Http isteklerini gerçekleştireceğiz.

Yeni bir angular projesi oluşturuyoruz.

Yeni proje oluşturmak için cmd penceresini açtıktan sonra projemizi hangi klasörümüzde oluşturmak istiyorsak o klasöre cd komutu ile gidiyoruz. Örneğin: cd C:\\AngularProjects.

Daha sonra cmd üzerinden aşağıdaki komutumuzu çalıştırıyoruz.

ng new promise-sample

Bu kodumuzu çalıştırdıktan sonra bize routing olmasını istiyor musunuz diye soru soracak eğer istiyorsak y olarak seçim yapabiliriz. Daha sonrasında da stil seçeneğini soracak burada da CSS seçebiliriz. Bu işlemi de yaptıktan sonra projemiz oluşturulacaktır.

Projemiz oluşturulduktan sonra Visual Studio Code ile açarak düzenlemeleri gerçekleştireceğiz.

Öncelikle bir adet UserService nesnesi oluşturacağız. Bu işlemi sağlamak için de VS Code üzerinde Terminal menüsünden New Terminal seçeneğini seçtiğimizde aşağıdaki komutu yazıyoruz.

ng g s user

g: Generate, s: Service anlamına gelmektedir. Servis nesnemizin adını da User olarak belirlediğimiz için kodu çalıştırdığımızda UserService nesnemiz oluşturulmuş olacaktır. Bu servis oluşturulduktan sonra HttpClient kullanarak API isteklerimizi sağlayacağız. List adında da bir metot oluşturacağız ve HttpClient kullanarak API isteğimizi gerçekleştirmiş olacağız.

UserService’i aşağıdaki gibi oluşturabilirsiniz.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) { }

  list() : Promise<any>{
    return firstValueFrom(this.http.get('https://jsonplaceholder.typicode.com/users'));
  }
}

Angular 6 ve sonraki sürümlerde toPromise() metodu deprecated olarak görünmektedir. Bunun yerine firstValueFrom() metodunu kullanarak işlemleri gerçekleştirebiliriz.

Bu işlemlerden sonra da app.component.ts içerisinde metodumuzu aşağıdaki gibi çağırabiliriz.

import { Component } from '@angular/core';
import { UserService } from 'src/services/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'promise-sample';
  

  constructor(private userService: UserService) {
    
    this.list();
  }

  list(){
    this.userService.list()
                  .then((response) => {
                    console.log("response");
                    console.log(response);
                  })
                  .catch((error) => {
                    console.error(error);
                  });
  }
}

Dikkat etmemiz gereken noktalardan birisi de HttpClient ve UserService için app.module.ts içerisinde eklemeler yapmamız gerekmektedir. Bunları sağlamazsak hata alırız.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserService } from 'src/services/user.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

imports kısmında HttpClientModule eklemesini yapıyoruz.

providers kısmında da UserService eklemesini yapıyoruz.

Daha sonra projemizi terminal üzerinden ng serve –o ile çalıştırarak console kısmında bu verilerin başarılı bir şekilde geldiğini görebiliriz.

Projenin kodlarını Github üzerinden indirebilirsiniz.

https://github.com/alicancevik/AngularPromiseSample

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…