Yan yana

PromisevsAsync/Await

Q: Her promise'i await edebilir miyim?

Evet. await her promise ile, hatta then metodu olan her nesneyle çalışır; async/await ortaya çıkmadan önce yazılmış kütüphanelerin döndürdüğü promise'ler de buna dahildir.

Promise ile async/await arasındaki fark nedir?

Güncellendi 6 Ekim 20262 dk okuma7 fark

Kısaca

Promise, sonradan gelecek bir değeri temsil eden nesnedir; async/await ise promise'ler üzerine kurulu, onları adım adım kodla beklemeyi sağlayan sözdizimidir.

Programlamanın Temelleris. 51

Promise

Söz

Promise, asenkron bir işlemin nihai sonucunu temsil eden bir nesnedir; iş bittiğinde kodun başarıya ya da hataya tepki vermesini sağlar.

Promise sayfasını oku

Programlamanın Temelleris. 2

Async/Await

Async/await, asenkron kodu sıradan adım adım kod gibi okunur biçimde yazmayı sağlayan, her await'te bir promise ya da görev bitene dek duran sözdizimidir.

Async/Await sayfasını oku

Promise ve Async/Await karşılaştırması

Özellik	Promise	Async/Await
Ne olduğu	Gelecekteki bir değeri temsil eden bir nesne	Promise tabanlı kod yazmak için bir sözdizimi
Kod stili	`.then()` callback'lerinden oluşan bir zincir	`await` ile adım adım kod
Hatalar	Zincirin sonunda `.catch()`	Beklenen adımların çevresinde `try/catch`
Döndürdüğü	Her `.then()` çağrısından yeni bir promise	Her `async` fonksiyondan bir promise
Paralel çalıştırma	`Promise.all`, `Promise.race` ve benzeri yardımcılar	Yine `Promise.all` kullanır; düz `await` adımları sırayla çalıştırır
Hata ayıklama	Pek çok callback boyunca adım adım izlemek daha zor	Senkron kod gibi adım adım izlenir
JavaScript'e eklendiği sürüm	ES2015	ES2017

Fark, açıklamalı

Promise, asenkron bir işlemin sonucunu temsil eden bir nesnedir: beklemede (pending) başlar, sonra bir değerle yerine getirilir (fulfilled) ya da bir hatayla reddedilir (rejected). Async/await ise promise'leri kullanmanın bir sözdizimidir: bir async fonksiyon her zaman bir promise döndürür ve içindeki await, bir promise sonuçlanana kadar fonksiyonu duraklatır, ardından değerini geri verir ya da hatasını fırlatır.

Yani rakip değillerdir; async/await aynı şeyi yazmanın başka bir yoludur. Yalnızca promise'lerle her adım için bir .then() zincirler ve hatalar için bir .catch() ile bitirirsiniz. Async/await ile aynı adımlar sıradan kod gibi yukarıdan aşağıya okunur, yerel değişkenler bir adımdan diğerine kapsamda kalır ve hatalar normal bir try/catch ile yakalanır.

Async kodda da promise'leri doğrudan kullanmaya devam edersiniz. Bağımsız işleri aynı anda çalıştırmak için Promise.all, Promise.allSettled ya da Promise.race gerekir; eski bir callback ya da olay API'sini sarmak için de new Promise kullanılır. Sık yapılan bir hata, bağımsız çağrıları birbiri ardına await etmektir; bu onları sırayla çalıştırır. Bunun yerine hepsini birlikte başlatıp Promise.all ile bekleyin.

Bir başka yanlış, await'in programı bloke ettiğini düşünmektir. Yalnızca içinde bulunduğu async fonksiyonu duraklatır; event loop bu sırada tıklamaları, zamanlayıcıları ve diğer istekleri işlemeye devam eder. İki stilin performansı aynıdır; bu yüzden seçim okunabilirlikle ilgilidir: adım dizileri için async/await, birkaç işlemi birleştirmek için promise metotları.

Hangisini kullanmalısınız?

Promise şu durumlarda doğru seçim:

Birkaç işlemi aynı anda çalıştırıp Promise.all ya da Promise.race ile birleştiriyorsunuz.
Callback ya da olay tabanlı bir API'yi await edilebilmesi için new Promise ile sarıyorsunuz.
Kısa, tek adımlı bir zincir kendi başına yeterince açık okunuyor.

Async/Await şu durumlarda doğru seçim:

Kod, birbirine bağlı adımlardan oluşan bir dizi.
Hataları sıradan try/catch bloklarıyla yakalamak istiyorsunuz.
Asenkron adımlar arasında döngülere ya da koşullara ihtiyacınız var.

Bir kullanıcının ödenmiş siparişlerini yüklemek, iki yolla

Promisejavascript

// Promise chain: each step in a .then()
function loadPaidOrders(id) {
  return fetchUser(id)
    .then((user) => fetchOrders(user.id))
    .then((orders) => orders.filter((o) => o.paid))
    .catch((error) => {
      console.error("Could not load orders", error);
      return [];
    });
}

Async/Awaitjavascript

// async/await: the same steps, top to bottom
async function loadPaidOrders(id) {
  try {
    const user = await fetchUser(id);
    const orders = await fetchOrders(user.id);
    return orders.filter((o) => o.paid);
  } catch (error) {
    console.error("Could not load orders", error);
    return [];
  }
}

Sık sorulan sorular

Async/await, promise'lerden daha mı iyi?

Sıralı kodun çoğunda okuması daha kolaydır, ama onların yerini almaz: promise'ler üzerine kuruludur ve altta onları kullanır. Modern kodun çoğu ikisini birlikte kullanır: adımlar için await, paralel iş için Promise.all.

Async/await, promise'lerden daha mı yavaş?

Kayda değer bir fark yok. İkisi de aynı promise mekanizması üzerinde çalışır; asıl yavaşlık, bağımsız işleri birlikte değil tek tek await etmekten gelir.

Her promise'i await edebilir miyim?

Evet. await her promise ile, hatta then metodu olan her nesneyle çalışır; async/await ortaya çıkmadan önce yazılmış kütüphanelerin döndürdüğü promise'ler de buna dahildir.