JavaScript/TypeScript’te Promise, Async/Await ve Playwright/Cypress ile Uygulamalı Rehber

JavaScript/TypeScript’te Promise, Async/Await ve Playwright/Cypress ile Uygulamalı Rehber

Modern web geliştirmede asenkron işlemler kaçınılmazdır. API çağrıları, dosya okuma işlemleri veya uzun süreçli hesaplamalar gibi işlemler ana uygulama akışını engellemeden gerçekleştirilmelidir. Bu noktada Promise’ler, async/await ve Playwright/Cypress gibi araçlar devreye girer. Bu makale, bu kavramları sıfırdan başlayarak, pratik örneklerle ve ileri seviye tekniklerle adım adım açıklayacaktır. Playwright ve Cypress ile gerçek dünya senaryolarında nasıl kullanıldıklarını görecek, performans karşılaştırmaları yapacağız ve olası sorunları ele alacağız. Hazırsanız, asenkron dünyasına dalalım!

Promise’ler: Asenkron İşlemlerin Temeli

Promise’ler, bir işlemin gelecekte bir değere sahip olacağını temsil eden nesnelerdir. Bu değer ya başarılı bir sonuç (resolved) ya da bir hata (rejected) olabilir. Bir Promise, üç ana durumdan birinde bulunur: pending (bekleyen), fulfilled (tamamlanmış) ve rejected (reddedilmiş). then() metodu, Promise başarılı bir şekilde tamamlandığında çalışacak fonksiyonu, catch() metodu ise hata durumunda çalışacak fonksiyonu tanımlar. Promise’lerin temel avantajı, asenkron işlemlerin daha okunaklı ve yönetilebilir bir şekilde ele alınmasını sağlamasıdır.

Örneğin, bir API çağrısı yaparken, Promise kullanarak sonucu bekleyebilir ve hata durumlarını yönetebiliriz:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('Veriler:', data))
  .catch(error => console.error('Hata:', error));

Bu kodda, fetch() fonksiyonu bir Promise döndürür. .then() metotları, başarılı bir yanıt alındığında ve veriler ayrıştırıldıktan sonra çalışır. .catch() metodu ise hata durumunda tetiklenir. Promise'ler, karmaşık asenkron işlemleri zincirleme yaparak daha okunaklı hale getirmemize olanak tanır. Daha fazla bilgi için Fatih Soysal'ın web sitesini ziyaret edebilirsiniz.

Async/Await: Promise'leri Daha Okunaklı Hale Getirmek

Async/await, Promise'lerin daha senkron bir şekilde yazılmasını sağlayan bir sözdizimsel şekerdir. async anahtar kelimesi, bir fonksiyonun bir Promise döndüreceğini belirtir. await anahtar kelimesi ise bir Promise'in sonuçlanmasını bekler ve sonucu döndürür. Async/await, kodun okunabilirliğini önemli ölçüde artırır ve hata yönetimini kolaylaştırır.

Aynı API çağrısını async/await kullanarak yazalım:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Veriler:', data);
  } catch (error) {
    console.error('Hata:', error);
  }
}

fetchData();

Bu örnekte, fetchData() fonksiyonu async ile tanımlanmıştır. await anahtar kelimesi, fetch() ve response.json() fonksiyonlarının sonuçlarını bekler. try...catch bloğu, hata yönetimini kolaylaştırır. Async/await, özellikle birden fazla Promise'in sıralı olarak çalıştırılması gerektiğinde kodun okunabilirliğini büyük ölçüde artırır.

Async/Await ile Birden Fazla Promise'i Paralel Çalıştırmak

Birden fazla Promise'i paralel olarak çalıştırmak, performansı artırmak için etkili bir yöntemdir. Promise.all() metodu, bir Promise dizisinin tümünü bekler ve sonuçlarını bir dizi olarak döndürür. Async/await ile birlikte kullanıldığında, bu işlem daha da okunaklı hale gelir:

async function fetchMultipleData() {
  const promises = [
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
    fetch('https://api.example.com/data3')
  ];

  try {
    const responses = await Promise.all(promises);
    const data = await Promise.all(responses.map(response => response.json()));
    console.log('Veriler:', data);
  } catch (error) {
    console.error('Hata:', error);
  }
}

fetchMultipleData();

Playwright ile Asenkron Test Otomasyonu

Playwright, modern web uygulamalarını test etmek için güçlü bir araçtır. Asenkron işlemlerle başa çıkmak için, Playwright, Promise'ler ve async/await'i kullanır. Sayfa yüklenme süreleri, API çağrıları ve diğer asenkron işlemler, Playwright'in sağladığı API'ler ile kolayca yönetilebilir.

Örneğin, bir web sayfasının yüklenmesini bekleyip bir elementin görünürlüğünü kontrol edebiliriz:

const { chromium } = require('playwright');

async function testPageLoad() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com');
  await page.waitForSelector('#myElement'); // Elementin görünür olmasını bekler
  console.log('Element bulundu!');
  await browser.close();
}

testPageLoad();

Cypress ile Asenkron Test Otomasyonu

Cypress, Playwright'e benzer şekilde asenkron işlemleri destekleyen bir test otomasyon aracıdır. Cypress, özellikle asenkron işlemleri daha kolay bir şekilde ele almayı sağlar. Cypress'in bekleyiş mekanizmaları, asenkron işlemlerin tamamlanmasını otomatik olarak bekler. Bu sayede, test kodları daha temiz ve okunaklı olur.

Örnek olarak, bir API çağrısının sonucunu doğrulayabiliriz:

describe('API çağrısı testi', () => {
  it('API doğru veri döndürüyor', () => {
    cy.request('https://api.example.com/data').then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body.data).to.not.be.null;
    });
  });
});

Cypress'in kendi dahili Promise yönetimi sayesinde, then() metodu ile API cevabını işlemek ve doğrulamalar yapmak oldukça kolaydır. Bu da test kodlarının karmaşıklığını azaltır.

Playwright ve Cypress Performans Karşılaştırması

| Özellik | Playwright | Cypress |
|-----------------|---------------------------------|--------------------------------|
| Hız | Genellikle daha hızlı | Genellikle daha yavaş |
| Hata Yönetimi | Daha detaylı hata raporları | Daha basit hata raporları |
| API Desteği | Geniş API desteği | Daha sınırlı API desteği |
| Öğrenme Eğrisi | Orta | Kolay |
| Cross-Browser | Chromium, Firefox, WebKit | Chrome ağırlıklı |

Öğrenme Yol Haritası

Yeni Başlayan: Promise'lerin temel kavramlarını ve then(), catch() metodlarını öğrenin. Basit asenkron işlemleri Promise'ler ile yönetmeyi pratik yapın.

Orta Seviye: Async/await sözdizimini öğrenin ve Promise'leri daha okunaklı bir şekilde kullanın. Promise.all() ile birden fazla Promise'i paralel çalıştırmayı öğrenin. Playwright veya Cypress'in temel özelliklerini inceleyin ve basit test senaryoları oluşturun.

İleri Seviye: Karmaşık asenkron işlemleri yönetin. Performans optimizasyonları yapın. Playwright ve Cypress'in gelişmiş özelliklerini kullanarak daha kapsamlı testler oluşturun. Hata yönetimi stratejileri geliştirin.

Sonuç

Promise'ler, async/await ve Playwright/Cypress, modern web geliştirmede asenkron işlemleri yönetmek ve test etmek için olmazsa olmaz araçlardır. Bu araçları doğru ve etkili bir şekilde kullanarak, daha sağlam, performanslı ve okunaklı uygulamalar geliştirebilirsiniz. Daha fazla bilgi için Fatih Soysal'ın web sitesini inceleyebilirsiniz.

Sıkça Sorulan Sorular

• Promise'ler neden önemlidir? Asenkron işlemlerin düzenli ve okunaklı bir şekilde yönetilmesini sağlarlar.
• Async/await'in avantajları nelerdir? Kodun okunabilirliğini artırır ve hata yönetimini kolaylaştırır.
• Playwright ve Cypress arasındaki farklar nelerdir? Performans, API desteği ve öğrenme eğrisi açısından farklılık gösterirler.
• Hata yönetimi nasıl yapılır? catch() bloğu ve try...catch yapıları kullanılabilir.
• Performansı nasıl artırabilirim? Promise.all() ile paralel işlem, gereksiz bekleyişlerden kaçınma gibi yöntemler kullanılabilir.

Yazar: Fatih Soysal