Ağ istekleri, dosya okumaları ve zamanlayıcıların tümü daha sonra tamamlanır, ancak JavaScript öylece durup bekleyemez; aksi halde sayfa donar. JavaScript vaatleri size “bu bittiğinde şunu yapın, başarısız olursa şunu yapın” demenin düzenli bir yolunu sunar.

Çoğunlukla async ve await yazsanız bile, alttaki vaatleri kullanıyorsunuz, dolayısıyla bunları anlamak hata ayıklamayı çok daha kolay hale getiriyor. Bu örnekleri Node.js 24’te çalıştırdık ve gösterilen çıktı bu çalıştırmadan geliyor. Modern tarayıcılarda da aynı şekilde davranırlar.

Söz nedir?

Bir söz, gelecekteki bir değerin yer tutucusudur. Sipariş verirken bir restoranın size verdiği zil sesini düşünün. Henüz yemeğinizi yemediniz ama hazır olduğunu veya bir sorun olduğunu size bildirecek bir şeyi elinizde tutuyorsunuz ve bu arada başka şeyler yapmakta özgürsünüz.

Kodda, eşzamansız bir işlev hemen bir söz döndürür ve bundan sonra ne olması gerektiğini eklersiniz:

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

Üç vaat durumu

Yerine getirilen veya reddedilen bir söze taahhüt edilen denir. Bir söz yalnızca bir kez yerine getirilebilir. Bundan sonra durumu ve değeri sabitlenir ve daha sonra resolve veya reject‘e yapılan çağrılar dikkate alınmaz.

Bir söz oluştur

Genellikle fetch gibi API’lerden gelen vaatleri kullanırsınız, ancak bir tane oluşturmak bunların nasıl çalıştığını gösterir. Yapıcı iki işlevi alır, resolve ve reject:

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Sözün hemen günlüğe kaydedilmesi, zamanlayıcının tetiklenmemesi nedeniyle hala beklemede olduğunu gösterir. Değere yalnızca bir işleyici veya await aracılığıyla ulaşılabilir. Bir Error, hata ayıklamaya yardımcı olan bir yığın izi taşıdığından her zaman bir dize yerine bir Error nesnesiyle reddedin.

sonra yakala ve sonunda

Bu üç yöntem işleyicileri bir söze bağlar:

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then başarı durumunda çalışır, catch başarısızlık durumunda çalışır ve finally her iki şekilde de çalışır. Bu, finally‘ü, yükleme döndürücüsünün saklanması gibi temizlik için doğru yer haline getirir. Hiçbir argüman kabul etmez çünkü sonucu umursamaması gerekir.

Zincirleme sözler

Ana fikir, then‘in her zaman yeni bir söz vermesidir. İşleyicinizin geri getirdiği şey, o yeni sözün değeri olur:

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

Bir işleyici başka bir söz verirse zincir, devam etmeden önce bunun yerine oturmasını bekler. İç içe geçmiş geri aramaları düz bir adım dizisine dönüştüren şey budur:

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

Hatalar bir zincir boyunca nasıl ilerler?

Reddedilen bir söz, catch‘ye ulaşana kadar her then‘i atlar. Bir işleyicinin içine atmak da reddedilme sayılır. Ve normal olarak geri dönen bir catch zinciri tekrar yoluna sokar:

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

Bunu try ve catch‘nin eşzamansız versiyonu olarak düşünün. Sondaki bir catch genellikle tüm zinciri kapsar. Yalnızca bir hatayı günlüğe kaydetmek istiyorsanız ve yine de başarısız olursanız, onu catch içinden tekrar atın.

Promise.all, allSettled, race ve herhangi biri

Bu statik yöntemler aynı anda birden fazla vaadi koordine eder. Hepsi bir dizi alır ve bir söz verir.

Bunları test etmek için biri gecikmeden sonra başarılı olan, diğeri gecikmeden sonra başarısız olan iki küçük yardımcı kullandık:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

Dikkat edilmesi gereken iki ayrıntı. b ilk önce bitirilse bile sonuçlar giriş sırasını korur. Ve toplam süre yaklaşık 300 ms idi; en yavaş görevin süresi, 600 ms’lik toplam değil, çünkü üçü de zaten aynı anda çalışıyordu. Bunlardan herhangi biri reddederse, hepsi derhal reddeder:

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

Bu, her şeyi bekler ve her sonucu rapor eder, böylece bir başarısızlık geri kalanını kaybetmez. Her widget’ın bağımsız olarak yüklendiği bir kontrol paneline uygundur:

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race ve Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

Aradaki fark, race başarısız olsa bile ilk karar vereni alırken, any bir şey başarılı olduğu sürece başarısızlıkları görmezden gelir. race‘ün klasik kullanımı yavaş bir isteğe zaman aşımı eklemektir, ancak daha yavaş olan görev siz onu iptal etmediğiniz sürece arka planda çalışmaya devam eder.

Vaatler ve eşzamansız/bekleme

async ve await aynı vaatlerle çalışmanın daha okunaklı bir yoludur. Bir async işlevi her zaman bir söz döndürür ve await, bir söz yerine getirilene kadar bu işlevi duraklatır:

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

Reddetmeler atılan hatalara dönüşür, dolayısıyla sıradan try ve catch çalışır. Paralel çalışma için hala Promise.all‘e ihtiyacınız var, çünkü bir çağrıyı birbiri ardına beklemek onları sırayla çalıştırır. JavaScript eşzamansız/beklemede kılavuzumuz bu konuyu daha derinlemesine ele alıyor.

Vaatler ve olay döngüsü

Söz zaten yerine getirilmiş olsa bile, sözü yerine getirenler hiçbir zaman hemen çağrılmaz. Geçerli kod bittikten sonra ve herhangi bir zamanlayıcıdan önce çalışırlar. İşte kanıtı:

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

İlk önce senkronize kod çalıştırılır. Daha sonra, söz işleyicilerini barındıran mikro görev kuyruğu gelir. Ancak o zaman olay döngüsü, zamanlayıcı gibi bir sonraki görevi alır. Bu popüler bir röportaj sorusudur ve sıfırın setTimeout‘ünün neden hemen gelmediğini açıklar.

Vaatler ve geri aramalar

Yaygın hatalar

• then‘nin içine dönmeyi unutmak. return olmadan, bir sonraki adım undefined‘ü alır ve içsel vaadinizi beklemez.
• Hiç catch yok. Bu, işlenmeyen bir reddetmeye neden olur ve Node.js’de işlemi varsayılan olarak durdurur.
• Zincirleme yerine iç içe yerleştirme. then‘yi then‘ün içine koymak, geri arama cehennemini yeniden yaratır. Sözü iade edin ve zincire devam edin.
• Bir sözü new Promise‘ye sarmalamak. Bir işlev zaten bir söz döndürüyorsa, onu kullanın.
• forEach‘yi eşzamansız geri aramalarla kullanma. Beklemez. JavaScript dizi yöntemleri kılavuzumuzda gösterildiği gibi, map ile birlikte for...of veya Promise.all‘ü kullanın.
• Bir sözün iptal edilebileceğini düşünmek. Tek başına iptal edilemez. İstekler için AbortController‘yi kullanın.

Son sözler

Sözler birkaç kuraldan oluşur: Bir söz bir kez yerine getirilir, then yeni bir söz verilir ve hatalar, bir şey onları yakalayana kadar zincir boyunca ilerler. Bu kurallar doğal gelmeye başladığında, async ve await sihirli olmayı bırakır. Alıştırma yapmak için, sözler kullanarak bir geri çağırma tabanlı işlevi yeniden yazın, ardından Promise.all ile iki uç nokta getirin ve bir arızayı doğru şekilde ele alın.

Sık sorulan sorular

Öğrenmeye devam et