jQuery Academy · Ders

Promise'leri Zincirleme ve Birleştirme

.then() ve .pipe() kullanarak birden çok eşzamansız işlemi zincirlemeyi ve $.when() ile birden çok Promise'in tamamlanmasını bekleyerek karmaşık iş akışlarını birleştirmeyi öğrenin.

Promise'leri Zincirleme ve Birleştirme, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. 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, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Zaman Uyumsuz İşlemleri Sıralama

Web geliştirmede, zaman uyumsuz görevleri (veri getirme gibi) genellikle belirli bir sırayla gerçekleştirmemiz gerekir. Promise'leri birbirine bağlamak bunu düzenli bir şekilde yapmamızı sağlar.

Geri çağırma işlevlerini iç içe yerleştirmek yerine (bu, "geri çağırma işlevi karmaşasına" yol açabilir), işlemleri ardışık olarak birbirine bağlayabilir ve kodumuzun okunmasını ve bakımını çok daha kolay hâle getirebiliriz.

.then() ile Birbirine Bağlama

.then() yöntemi, birbirine bağlama işleminin temelidir. Bir Deferred (veya Promise) çözümlendiğinde, kendisine ait .then() geri çağırma işlevi çalıştırılır. Bu geri çağırma işlevinin döndürdüğü değer, zincirdeki sonraki .then() tarafından kullanılabilir.

Geri çağırma işlevi yeni bir Deferred döndürürse zincir, devam etmeden önce bu yeni Deferred'ın çözümlenmesini bekler.

Basit .then() Zinciri Örneği

İki zaman uyumsuz adımı benzettiğimiz basit bir örneğe bakalım. İkinci adım yalnızca birinci adım tamamlandıktan sonra çalışır ve birinci adımdaki verileri kullanır.

step1 sonucunun ('Data from Step 1') step2'ye nasıl aktarıldığına dikkat edin.

function runChainExample() {
  let dfd1 = new $.Deferred();
  let dfd2 = new $.Deferred();

  setTimeout(() => {
    console.log("Step 1 complete!");
    dfd1.resolve("Data from Step 1");
  }, 500);

  dfd1.then(function(data1) {
    console.log("Received in Step 2: " + data1);
    setTimeout(() => {
      console.log("Step 2 complete!");
      dfd2.resolve("Processed " + data1);
    }, 300);
    return dfd2;
  }).then(function(data2) {
    console.log("Received in Final Step: " + data2);
    console.log("Chain finished!");
  });
}

$(document).ready(function() {
  runChainExample();
});

.then() Zincirlerinde Veri Akışı

Bir .then() geri çağırma işlevinin döndürdüğü değer, sonraki .then() için girdiyi belirler.

Deferred olmayan bir değer döndürürseniz bu değer, sonraki .then() için çözümlenmiş değer olur.
Bir Deferred nesnesi döndürürseniz zincir, bu Deferred çözümlenene kadar duraklar ve çözümlenmiş değeri sonraki .then()'e aktarır.

Dönüştürme için .pipe() Kullanımı

.then() günümüzdeki standart yöntem olsa da jQuery'nin .Deferred() nesnesi .pipe() yöntemini de sunar. Bu yöntem .then()'e benzer; ancak başlangıçta çözümlenmiş veya reddedilmiş değeri dönüştürmek ya da zinciri sürdürecek Deferred'ı filtrelemek için tasarlanmıştır.

.pipe(), dönüştürülmüş bir değerle çözümlenen yeni bir Deferred döndürmek için kullanılabilir; böylece değer bir sonraki aşamaya etkili bir şekilde "aktarılır".

.pipe() Dönüştürme Örneği

Burada .pipe() ile birinci işlemin sonucunu alıp dönüştürüyor (örneğin büyük harfe çeviriyor) ve ardından dönüştürülmüş değeri son .done() işleyicisine aktarıyoruz.

function runPipeExample() {
  let dfd = new $.Deferred();

  setTimeout(() => {
    console.log("Initial data ready.");
    dfd.resolve("hello world");
  }, 500);

  dfd.pipe(function(originalData) {
    console.log("Piping: Transforming data...");
    return originalData.toUpperCase(); // Transforms the value
  }).done(function(transformedData) {
    console.log("Final result: " + transformedData);
  });
}

$(document).ready(function() {
  runPipeExample();
});

$.when() ile Birleştirme

Birbirinden bağımsız birden çok zaman uyumsuz göreviniz olduğunu, ancak devam etmeden önce hepsinin tamamlanmasını beklemeniz gerektiğini düşünün. İşte bu noktada $.when() devreye girer.

$.when(), bir veya daha fazla Deferred nesnesini (veya Promise'i) bağımsız değişken olarak alır ve yeni bir Deferred döndürür. Bu yeni Deferred, yalnızca girdideki tüm Deferred'lar çözümlendiğinde çözümlenir.

$.when() Paralel Görevler Örneği

Bu örnekte birbirinden bağımsız iki AJAX isteğini (fetchUser ve fetchPosts) benzetiyoruz. Birleşik sonuçları logging işlemine göndermeden önce ikisinin de tamamlanmasını beklemek için $.when() kullanıyoruz.

İşlemlerin ardışık değil, paralel yürütüldüğüne dikkat edin.

function runWhenExample() {
  function fetchUser() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("User data fetched.");
      dfd.resolve({ id: 1, name: "Alice" });
    }, 800);
    return dfd.promise();
  }

  function fetchPosts() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("Posts data fetched.");
      dfd.resolve([{ id: 101, title: "Post 1" }, { id: 102, title: "Post 2" }]);
    }, 500);
    return dfd.promise();
  }

  $.when(fetchUser(), fetchPosts())
    .done(function(userData, postsData) {
      console.log("All data loaded!");
      console.log("User: ", userData);
      console.log("Posts: ", postsData);
    })
    .fail(function() {
      console.log("One or more tasks failed.");
    });
}

$(document).ready(function() {
  runWhenExample();
});

$.when() Sonuçlarına Erişme

$.when() tarafından döndürülen Deferred çözümlendiğinde, kendisine ait .done() veya .then() geri çağırma işlevleri, girdideki Deferred'ların çözümlenmiş değerlerini $.when()'e aktarılma sırasıyla ayrı bağımsız değişkenler olarak alır.

Bu sayede, tüm veriler kullanılabilir olduğunda birden çok kaynaktan gelen verileri birleştirmek ve işlemek kolaylaşır.

Promise Zinciri Bilgi Sınavı

Aşağıdaki jQuery kod parçasını inceleyin:

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

Konsola yazdırılan FINAL çıktı nedir ve hangi sırayla yazdırılır?

Tekrar: Birbirine Bağlama ve Birleştirme

Karmaşık zaman uyumsuz iş akışlarını nasıl yöneteceğinizi öğrendiniz:

.then() ile birbirine bağlama: İşlemleri sıralar ve sonuçları bir aşamadan sonrakine aktarır.
.pipe(): Değerleri dönüştürmek veya bir zincirdeki Deferred'ları eşlemek için kullanılan daha eski bir yöntemdir.
$.when() ile birleştirme: Birden çok bağımsız Deferred'ın paralel olarak tamamlanmasını bekler; devam etmeden önce sonuçlarını ayrı bağımsız değişkenler olarak sağlar.

Bu kalıplar, sağlam ve okunabilir zaman uyumsuz uygulamalar oluşturmak için çok önemlidir.

Sıkça Sorulan Sorular

“Promise'leri Zincirleme ve Birleştirme” dersi ücretsiz mi?

Evet — “Promise'leri Zincirleme ve Birleştirme” 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 jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Promise'leri Zincirleme ve Birleştirme” dersinde ne öğreneceğim?

.then() ve .pipe() kullanarak birden çok eşzamansız işlemi zincirlemeyi ve $.when() ile birden çok Promise'in tamamlanmasını bekleyerek karmaşık iş akışlarını birleştirmeyi öğrenin. jQuery 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.

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

Önceden deneyim gerekmez. CoddyKit'te jQuery 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, 3 dersinin 2. dersidir.

“Promise'leri Zincirleme ve Birleştirme” 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 jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery 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

← jQuery Academy Sayfasına Dön