Angular'da işlemlerimizi bir sıraya göre yaptırma - Promise kullanımı

Angular'da İşlemlerimizi Bir Sıraya Göre Yaptırma - Promise Kullanımı

Angular, modern web uygulamaları geliştirmek için kullanılan popüler bir framework'tür. Birçok durumda, uygulamanızda asenkron işlemler gerçekleştirmeniz gerekecektir. Bu işlemlerin belirli bir sıraya göre yapılması gerektiğinde, JavaScript'in Promise yapısını kullanmak oldukça faydalıdır.

Promise Nedir?

Promise, JavaScript'te asenkron işlemleri yönetmek için kullanılan bir yapıdır. Bir işlemin tamamlanmasını veya başarısız olmasını temsil eder. Promise'lar, özellikle bir dizi asenkron işlemi sırayla gerçekleştirmek istediğinizde kullanışlıdır.

Promise Yapısının Temel Bileşenleri

• Pending (Beklemede): Promise henüz sonuçlanmadı.
• Fulfilled (Başarılı): Promise başarılı bir şekilde sonuçlandı ve bir değer döndürdü.
• Rejected (Reddedildi): Promise başarısız oldu ve bir hata döndürdü.

Promise, then, catch ve finally yöntemleri ile zincirlenebilir. Bu, işlemlerin belirli bir sırayla gerçekleştirilmesini sağlar.

Angular'da Promise Kullanımı

Örnek Senaryo

Bir kullanıcı bilgilerini almak ve ardından bu bilgilerle ilgili ek işlemler yapmak istediğimizi varsayalım. Bu işlemleri sırasıyla gerçekleştirmek için Promise kullanabiliriz.

Adım 1: Promise Tabanlı Servis Oluşturma

Öncelikle, kullanıcı bilgilerini getiren bir servis oluşturacağız. Bu servis bir Promise döndürecek.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor() {}

  getUser(): Promise<any> {
    return new Promise((resolve, reject) => {
      // Simüle edilmiş API çağrısı
      setTimeout(() => {
        const user = { id: 1, name: 'John Doe' };
        resolve(user);
      }, 2000);
    });
  }
}

Adım 2: Komponentte Promise Kullanımı

Şimdi, oluşturduğumuz servisi bir komponent içinde kullanacağız. Kullanıcı bilgilerini aldıktan sonra bu bilgilerle ek işlemler gerçekleştireceğiz.

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <div *ngIf="user">
      <h2>Kullanıcı Bilgileri</h2>
      <p>ID: {{ user.id }}</p>
      <p>İsim: {{ user.name }}</p>
    </div>
  `,
})
export class UserComponent implements OnInit {
  user: any;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService
      .getUser()
      .then((user) => {
        this.user = user;
        return this.performAdditionalTask(user);
      })
      .then((result) => {
        console.log('Ek işlem sonucu:', result);
      })
      .catch((error) => {
        console.error('Hata:', error);
      });
  }

  performAdditionalTask(user: any): Promise<string> {
    return new Promise((resolve, reject) => {
      // Simüle edilmiş ek işlem
      setTimeout(() => {
        if (user.id) {
          resolve('Ek işlem başarılı!');
        } else {
          reject('Ek işlem başarısız!');
        }
      }, 1000);
    });
  }
}

Promise Zincirleme

Promise'ları zincirleme, işlemleri sırayla gerçekleştirmek için oldukça kullanışlıdır. Yukarıdaki örnekte, kullanıcı bilgilerini aldıktan sonra performAdditionalTask fonksiyonunu çağırarak bu işlemleri sıralı hale getirdik.

Promise Kullanımının Avantajları

• Kodun Anlaşılabilirliği: Promise'lar, asenkron işlemleri yönetmeyi ve anlamayı kolaylaştırır.
• Hata Yönetimi: catch yöntemi ile asenkron işlemler sırasında oluşabilecek hataları yönetmek mümkündür.
• Zincirleme: Promise'lar, işlemleri sırayla gerçekleştirmeyi ve bir işlemin sonucunu bir sonrakine geçirmeyi sağlar.

Angular'da işlemlerimizi bir sıraya göre yaptırma - Promise kullanımı, Angular'da asenkron işlemleri bir sıraya göre gerçekleştirmek için Promise yapısı oldukça kullanışlıdır. Promise'lar, asenkron işlemleri yönetmeyi kolaylaştırırken, kodun anlaşılabilirliğini de artırır.