Frontend Academy · Ders

Promise'ler: then catch finally Promise.all

Promise'ler oluşturup zincirleyin, catch bloklarında hataları yönetin, finally içinde temizlik yapın ve birden fazla Promise'i Promise.all ile paralel çalıştırın.

Promise'ler: then catch finally Promise.all, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Promise Nedir?

Promise, gelecekte kullanılabilir olacak bir değeri temsil eder. Üç durumdan birindeki nesnedir: beklemede (başlangıç), tamamlandı (bir değerle resolve edildi) veya reddedildi (bir nedenle başarısız oldu). Bir Promise'ın durumu sonuçlandıktan sonra kalıcıdır.

Promise Oluşturma

new Promise(executor) oluşturucusuyla bir Promise oluşturun. Yürütücü işlev, resolve ve reject geri çağırma işlevlerini alır. Başarı değerini resolve ile, hatayı ise reject ile gönderin.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() — Başarıyı İşleme

promise.then(onFulfilled), Promise tamamlandığında çalışacak bir geri çağırma işlevi kaydeder. Bu işlev, resolve edilen değeri alır. .then() yeni bir Promise döndürür ve zincirleme işlemi mümkün kılar.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() — Hataları İşleme

promise.catch(onRejected), reddedilmeleri işler. Bir zincirin sonuna yerleştirildiğinde, kendisinden önceki herhangi bir adımdan kaynaklanan her hatayı yakalar.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() — Her Zaman Çalıştırma

promise.finally(onFinally), Promise tamamlanmış veya reddedilmiş olsa da çalışır. Temizlik işlemleri için idealdir: yükleme göstergesini gizlemek, kilidi serbest bırakmak ve analiz verilerini günlüğe kaydetmek gibi.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Promise Zincirleme — Değer Döndürme

.then() içinden bir değer döndürdüğünüzde, bu değer bir sonraki .then() çağrısının resolve edilmiş değeri olur. Asenkron işlemleri art arda zincirlemek için yeni bir Promise döndürün.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() — Paralel Çalıştırma

Promise.all([p1, p2, p3]), tüm Promise'lerin resolve edilmesini bekler ve sonuç dizisini aynı sırayla döndürür. Herhangi bir Promise reddedilirse tüm işlem hemen reddedilir.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() — İlk Hata ile Durmama

Promise.allSettled(), tüm Promise'lerin sonuçlanmasını (resolve veya reject edilmesini) bekler ve {status, value} veya {status, reason} içeren sonuç nesnelerinden oluşan bir dizi döndürür. Tek bir hatanın tüm sonuçları geçersiz kılmasını istemediğiniz durumlarda yararlıdır.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() ve Promise.any()

Promise.race(), ilk sonuçlanan Promise ile resolve veya reject edilir. Promise.any(), ilk tamamlanan Promise ile resolve edilir (reddedilmeleri yok sayar; yalnızca tüm Promise'ler reddedilirse reject edilir). Zaman aşımı ve yedeklilik için kullanışlıdır.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Önceden Sonuçlanmış Promise'ler Oluşturma

Promise.resolve(value), value değeriyle zaten tamamlanmış bir Promise oluşturur. Promise.reject(error), zaten reddedilmiş bir Promise oluşturur. Sınama ve uyarlayıcı işlevler için yararlıdır.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

İşlenmeyen Reddetme Olayları

Bir Promise, .catch() olmadan reddedilirse işlenmeyen bir reddetmeye dönüşür. Modern tarayıcılar ve Node.js uyarılar yayımlar. Her zaman bir .catch() ekleyin veya async/await ile try/catch kullanın.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Kısa Kontrol

Birden çok Promise'i paralel olarak çalıştırıp tüm sonuçların bulunduğu bir diziyle resolve olan statik yöntem hangisidir?

Özet: Promise'ler

Başarı için .then(), hatalar için .catch(), temizlik için .finally() kullanılır. Zincirler değerleri aktarır. Promise.all() işlemleri paralelleştirir. Promise.allSettled() kısmi başarısızlıklara dayanır. En hızlı sonuç için Promise.race() kullanılır. Reddedilmeleri her zaman işleyin. Modern kod, Promise'lerin üzerinde sözdizimi kolaylığı olarak async/await kullanır.

Sıkça Sorulan Sorular

“Promise'ler: then catch finally Promise.all” dersi ücretsiz mi?

Evet — “Promise'ler: then catch finally Promise.all” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Promise'ler: then catch finally Promise.all” dersinde ne öğreneceğim?

Promise'ler oluşturup zincirleyin, catch bloklarında hataları yönetin, finally içinde temizlik yapın ve birden fazla Promise'i Promise.all ile paralel çalıştırın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Promise'ler: then catch finally Promise.all” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler
Geri Çağrılar ve Geri Çağrı Cehennemi
Promise'ler: then catch finally Promise.all
async/await ve Hata Yönetimi

← Frontend Academy Sayfasına Dön