jQuery AJAX ile Promises kullanımı

jQuery’nin AJAX fonksiyonları, JavaScript kodunuzda sunucuyla asenkron olarak iletişim kurmanıza olanak tanır. jQuery 1.5 sürümünden itibaren AJAX işlemleri için Promises yapısını desteklemeye başladı. Promises, asenkron işlemleri daha okunabilir ve yönetilebilir hale getirir.

Temel Kullanım

jQuery’nin $.ajax() fonksiyonu, bir Promise nesnesi döner. Bu, AJAX isteğinizin tamamlanması (başarı veya hata) durumunda belirli bir kodu çalıştırmanızı sağlar.

Örnek Kullanım

Aşağıda bir AJAX isteği örneği ve Promises kullanımı gösterilmektedir:

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts', // İstek yapılacak URL
    method: 'GET', // HTTP metodu
    dataType: 'json' // Dönen veri türü
})
.done(function(data) {
    // Başarıyla tamamlandığında çalışacak kod
    console.log('Başarı:', data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    // Hata ile sonuçlandığında çalışacak kod
    console.error('Hata:', textStatus, errorThrown);
})
.always(function() {
    // İstek tamamlandığında (başarı veya hata) her zaman çalışacak kod
    console.log('İstek tamamlandı');
});

.done(), .fail(), ve .always()

• .done(): İstek başarıyla tamamlandığında çağrılır. Dönen veriler parametre olarak geçilir.
• .fail(): İstek hata ile sonuçlandığında çağrılır. Hata detayları parametre olarak geçilir.
• .always(): İstek tamamlandığında (başarı veya hata durumunda) her zaman çağrılır.

Daha Kompleks Bir Örnek

Birden fazla AJAX isteği yaparak ve bunların tamamlanmasını bekleyerek işlem yapmak isteyebilirsiniz. Bunu yapmak için $.when ve $.Deferred kullanabilirsiniz:

var request1 = $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'GET',
    dataType: 'json'
});

var request2 = $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/2',
    method: 'GET',
    dataType: 'json'
});

$.when(request1, request2).done(function(response1, response2) {
    // Her iki istek de başarıyla tamamlandığında çalışacak kod
    console.log('İstek 1 yanıtı:', response1[0]);
    console.log('İstek 2 yanıtı:', response2[0]);
}).fail(function() {
    // İsteklerden biri veya her ikisi hata ile sonuçlandığında çalışacak kod
    console.error('Bir istek başarısız oldu.');
});

Bu örnekte, $.when iki AJAX isteğinin de tamamlanmasını bekler ve her ikisi de başarıyla tamamlandığında done fonksiyonu çalışır. Eğer herhangi biri hata ile sonuçlanırsa fail fonksiyonu çalışır.

Sonuç

jQuery AJAX Promises kullanımı, asenkron işlemleri daha yönetilebilir ve okunabilir hale getirir. .done(), .fail(), ve .always() fonksiyonları ile isteklerinizi yönetebilir ve çeşitli durumlar için uygun kodları yazabilirsiniz. Bu sayede, özellikle karmaşık asenkron işlemleri daha kolay ve düzenli bir şekilde yönetebilirsiniz.

Share on Facebook

Tweet