JavaScript Ders 8 – Asenkron JavaScript ve AJAX

Senkron vs. Asenkron:

  • Senkron: Kod satırları sırayla çalışır. Bir işlem tamamlanmadan sonraki işlem başlamaz.
  • Asenkron: Kod satırları sırayla yazılır, ancak yürütme senkronize değildir. Bir işlem başlatıldığında, arka planda çalışmaya devam eder ve sonuç hazır olduğunda bir geri çağırma (callback) fonksiyonu veya Promise aracılığıyla bilgilendirilirsiniz.

Neden Asenkron Programlama: Web uygulamalarında kullanıcı arayüzünün donmasını önlemek için önemlidir. Örneğin, sunucudan veri alırken asenkron olarak çalışmak kullanıcı arayüzünü yanıt vermeye devam ettirir.

Callback Fonksiyonları

  • Bir fonksiyonun argümanı olarak geçirilen ve bir işlem tamamlandıktan sonra çağrılan fonksiyondur.
  • Asenkron işlemleri yönetmek için kullanılır. İşlem tamamlandığında, callback fonksiyonu çalıştırılır ve sonuçla ilgili bilgi sağlar.
  • Callback Hell: Birden fazla asenkron işlem birbirine bağlı olduğunda, iç içe geçmiş çok sayıda callback fonksiyonu oluşabilir. Bu durum kodu okunması ve yönetilmesi zor hale getirebilir.

Promise’lar (Promises)

Asenkron bir işlemin sonucunu temsil eden bir nesnedir. Üç durumu olabilir:

  • pending: İşlem henüz tamamlanmadı.
  • fulfilled: İşlem başarıyla tamamlandı.
  • rejected: İşlem başarısız oldu.

.then() ve .catch() Metotları: Promise’ın sonucunu veya hata durumunu ele almak için kullanılır.

JavaScript
let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("İşlem tamamlandı!"); // Başarılı olursa resolve çağrılır
    // reject("Hata oluştu!"); // Hata durumunda reject çağrılır
  }, 2000);
});

promise.then(function(sonuc) {
  console.log(sonuc); // "İşlem tamamlandı!" çıktısı verir
}).catch(function(hata) {
  console.error(hata);
});

async/await Sözdizimi (ES2017): Promise’ları daha okunabilir ve senkron gibi görünmesini sağlayan bir sözdizimidir.

AJAX (Asenkron JavaScript ve XML)

Web sayfasını yeniden yüklemeden sunucudan veri almak için kullanılan bir tekniktir.

XMLHttpRequest Nesnesi (Eski Yöntem): Sunucuyla iletişim kurmak için kullanılır.

JavaScript
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data"); // İstek URL'sini belirtir
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText)); // Sunucudan gelen veriyi işler
  } else {
    console.error("Hata oluştu!");
  }
};
xhr.send(); // İstek gönderir

Fetch API (Modern Yöntem): XMLHttpRequest’a göre daha modern ve kullanımı kolay bir arayüzdür.

JavaScript
fetch('https://api.example.com/data')
  .then(response => response.json()) // JSON olarak ayrıştırır
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

RESTful API’ler ve JSON Veri Formatı

  • RESTful API: Web servislerini tasarlamak için kullanılan bir mimari stildir. Kaynaklara (resources) HTTP metotları (GET, POST, PUT, DELETE) aracılığıyla erişilir.
  • JSON (JavaScript Object Notation): Veri alışverişinde kullanılan hafif bir veri formatıdır. JavaScript nesnelerine benzer bir yapıya sahiptir ve kolayca ayrıştırılabilir.

Örnek:

JavaScript
fetch('https://api.openweathermap.org/data/2.5/weather?q=İstanbul&appid=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => {
    console.log("Hava Durumu:", data.main.temp);
  })
  .catch(error => console.error('Hata:', error));

Kaynak: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Etiketler