Bilmek istediğin her şeye ulaş

Jquery'de Ajax ile yapılan istekleri sunucuya sırayla gönderilmesini nasıl sağlayabilirim?

Projemizde istatistikleri ve tabloları sayfa yüklendikten sonra sunucudan çekerek gösteriyorum. Rapor sayfasında 15'ten fazla grafik ve tablo var. Ben hepsinin birden yüklenmesi yerine sırayla veri çekildikçe sonrakine geçerek onu yüklemesini istiyorum. "async" kullanarak denedim ama o zaman da Ajax başladığı zaman sayfa kullanılamıyor. Nasıl yapabilirim, kaynak belirtebilirseniz sevirim.Düzenle
Her istegi bir oncekinin $. Post'unun icine yaz:
function basla(){
  $.post(.. function(){
    ikinciyiCek()
  })
}

function ikinciyiCek(){
$.post(.. function(){
ucuncuyuCek()
})
}
  • Paylaş
Javascript senkron bir dil olmasına rağmen AJAX kullandığınızda asenkron bir durum oluşur. Hangi isteiğin (request) ne zaman tamamlanacağı işleme (process/backend) bağlıdır. Bu durumda işlemleri sıraya almak için Promise kullanmanızı tavsiye ederim. Promise kullanımı, yapılan işleri bir şarta bağlar ve callback yönetimini kolaylaştırır. Özetle asenkron olarak çalışan işlemleri bir düzene oturtarak sağlıklı bir iletişim sağlar. Ek olarak senkron bir yapı için ayrı ayrı fonksiyon kullansanız bile yapılan işlemler asenkron olduğu için bir yarar sağlamayabilir.

Genel olarak asenkron fonksiyonlar parametre olarak bir callback fonksiyonu alırlar ve işlem sonucunda bu callback fonksiyonu çalıştırılır. Promise kullanımında ise olay biraz farklı olur. Bu kullanımda fonksiyonlar callback fonksiyonları almazlar. Bunun yerine fonksiyonlar asenkron olmayan bir nesne döndürürler. Bu nesnelerin yönetimi ise "then" ve "catch" metodları ile sağlanır. "then" metodları birden fazla olabilir ve bir "then" metodu çalıştıktan sonra senkron olarak ikinci bir "then" metodu çalışır. Eğer bir hata olursa tüm işlemler durur ve "catch" metodu devereye girer. Sonuç olarak tüm istekler senkron olarak yapılmış olur. Son olarak, promise kullanabilmeniz için fonksyionlarınız promise yapısında olması gerekir. Bunu ise deferred nesneler üretir. Bu konu ilk bakışta çok karmaşık gelebilir. Kısa bir araştırma ve uygulama ile pratik kazanabilirsiniz.

Code

var response = aysncFunction1() ;

response
. then(function (result) {
console. Log(result) ;
return aysncFunction2()
})
. catch(function (error) {
console. Log(error) ;
}) ;

Promise konusu artık olmazsa olmaz bir yapıdır ve bu konuda bir çok makale bulabilirsiniz. Siz jQuery kullanıyorsunuz ve neyseki Core Developerlar bizi düşünerek jQuery için promise yapısnı da kütüphane içine entegre etmişler. Dökümantasyonu inceleyerek kullanımına bakabilirsiniz.

api.jquery.com/promise/
api.jquery.com/deferred.promise/
api.jquery.com/jquery. When/
api.jquery.com/category/deferred-object
  • Paylaş