JavaScript'te Promise Hell Sorunu

Bildiğiniz gibi promise'lar, callback hell problemini çözmek için oluşturuldu. Ancak zamanla promise'ların da karmaşık kod üretebileceği anlaşıldı. Bu sorun benzetme yapılarak promise hell olarak adlandırıldı.

Bu soruna kod örnekleri üzerinden bakalım. Bir parametre alan ve bu parametreye bağlı olarak sonuç döndüren getSmth fonksiyonumuz olduğunu varsayalım:

javascriptfunction getSmth(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num * num), 1000)
  });
}

Bu durumda bazı yararlı işlemleri (örneğin sunucudan veri almayı) taklit ediyoruz. Taklit olarak basitçe bir sayıyı parametre olarak geçiriyor ve bir saniye sonra bu sayının karesini döndürüyoruz.

Şimdi getSmth fonksiyonumuzu başka bir fonksiyon içinde kullanalım:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // 4 yazdıracak
  });
}

func();

İlk Sorun

Birbirini takip eden çok sayıda then yapısı kodun anlaşılmasını zorlaştırır:

javascriptfunction func(){
  getSmth(2).then(res1 => {
    // bir şeyler yap
  }).then(res2 => {
    // bir şeyler yap
  }).then(res3 => {
    // bir şeyler yap
  }).then(res4 => {
    // bir şeyler yap
  }).then(res5 => {
    // bir şeyler yap
  }).then(res6 => {
    // bir şeyler yap
  });
}

func();

İkinci Sorun

Başka türden bir sorun daha var. Şimdi fonksiyonumuzu iki kez kullanıp sonuçları toplamak istediğimizi varsayalım. Sonuçta şu kodu elde ederiz:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      console.log(res1 + res2); // 13 yazdıracak
    });
  });
}

func();

Zaten callback hell'i andırıyor, değil mi? Bir fonksiyon çağrısı daha ekleyelim - kod daha da kötüleşecek:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();

Elbette Promise.all kullanabiliriz:

javascriptfunction func() {
  Promise.all([getSmth(2), getSmth(3), getSmth(4)]).then(res => {
    console.log(res[0] + res[1] + res[2]);
  });
}

func();

Ancak aynı şeyi elde ettik mi? Hayır! İlk durumda her yeni fonksiyon bir önceki promise'in tamamlanmasını beklerken, ikinci durumda - tüm promise'ler aynı anda çalışır. Bu fark, bir sonraki fonksiyona bir önceki çağrının sonucunu iletmek istediğimizde önemli olacaktır:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(res1).then(res2 => {
      getSmth(res2).then(res3 => {
        console.log(res3);
      });
    });
  });
}

func();