Daha İyi Kod Yazmanın Yolu: JavaScript'de Callback Kullanarak Promise ve Async/Await'i Yönetmek

Adı : Daha İyi Kod Yazmanın Yolu: JavaScript'de Callback Kullanarak Promise ve Async/Await'i Yönetmek

JavaScript'te asenkron işlemler, özellikle modern web uygulamalarında önemli bir yer tutar. Asenkron işlemler, kullanıcının arayüzdeki etkileşimleri sırasında arka planda gerçekleştirilebilen zaman alıcı işlemlerdir. Örneğin, bir kullanıcının bir butona tıklaması, sayfanın içeriğinin dinamik olarak yüklenmesini tetikleyebilir. Bu işlem tarayıcıda yürütülen bir asenkron işlemdir.
JavaScript'te asenkron işlemler Promise ve Async / Await inşa edilebilir. Callbackler de birçok durumda kullanılıyor, ancak bu yoldan gidelim: Promise ve Async / Await'e nasıl callback kullanılacağına dair birkaç örnek verelim.
## Promise Kullanımı
Promise, belirli bir işlemi henüz tamamlanmamış olmasına rağmen, gelecekte belirli bir değer sağlamayı taahhüt eden bir JavaScript nesnesidir. Promise, asenkron işlemlerde kullanılır ve bize daha net, daha okunaklı ve daha yönetilebilir kod yazma imkanı verir.
Promise kullandığımızda, geri arama (callback) fonksiyonlarını kullanmaktan kaçınamayız, ancak bu fonksiyonları Promise objesi içinde saklarız. Promise, bir asenkron işlevin çözümlenmesini temsil eden bir nesnedir. Çözülme başarılı olursa, Promise, işlem sonucu ya da değeri şeklinde bir sonuç sağlar. İşlem başarısız olursa Promise, bir hata nesnesi olduğunu belirten bir reddetme sonucu sağlar.
```javascript
function getData(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(\"GET\", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
getData(\"https://jsonplaceholder.typicode.com/posts\")
.then(data => console.log(data))
.catch(error => console.error(error));
```
Bu örnekte, getData() işlevi, XMLHttpRequest yöntemiyle veri çekme ile işlem yaparken, Promise objesi içinde tuttuğumuzu görebilirsiniz. Promise, çözülme işlemi tamamlandığında bir sonuç döndürür. Sonuç bir dizi veri olarak yazdırılıyor.
## Async / Await Kullanımı
Async / Await, JavaScript'te daha da geliştirilmiş bir Promise işlemidir. Bu, sözdizimi bakımından daha anlaşılır ve daha kontrol edilebilir kod yapısına neden olur, ayrıca daha az hata ayıklama gerektirir.
Async, bir işlevin asenkron işlevleri işlemesine izin verir. Await, bir işlemin tamamlanmasını beklerken, işlemin sonuçlarının çözümlenmesine izin verir. Async / Await, Promise'yi yalnızca belirli bir async işlev sözdizimiyle kullanarak yönetmemizi sağlar.
```javascript
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
```
Bu örnekte, async ile işaretlenmiş bir fetchData() fonksiyonu oluştururuz ve fetch() metodu ile JSON verisi getiririz. İşlem tamamlandığında, await kullanarak verileri JSON formatında okuyoruz. Sonra biz bu verileri konsol ekranına yazdırıyoruz. Try / catch, olası bir hatanın ayıklamasını kolaylaştırmak için kullanılır.
## Callback Kullanarak Promise ve Async / Await'i Yönetmek
Promise ve Async / Await gibi yapılar, bir asenkron işlemi tanımlarken, kullanıcının işlem tamamlanana kadar beklemesini engelleyebilirsiniz. Vermeniz gereken API servisinin yavaşlığı nedeniyle oluşabilecek problemlerle başa çıkmak için callbackler veya başka bir asenkronizasyon şekilleri ile birleştirebilirsiniz.
```javascript
function getData(url, callback) {
const xhr = new XMLHttpRequest();
xhr.open(\"GET\", url);
xhr.onload = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
}
function displayData(data) {
console.log(data);
}
getData(\"https://jsonplaceholder.typicode.com/posts\", displayData);
```
Sonuç olarak, callback kullanarak Promise ve Async / Await'i yönetmek mümkündür. İşlemlerimizi daha anlaşılabilir ve yönetilebilir hale getirir, kodları daha temiz bir hale getirir. Ancak, async/await yolu daha okunaklı ve yönetilebilirdir. Her zaman tercih sebebi olması gerekir.
## Sık Sorulan Sorular
### Callback ve Promise arasında ne fark vardır?
İkisi arasındaki fark, birbirlerine oranla yapılacak işlemin ne kadar karmaşık olduğuyla ilgilidir. Callback, daha küçük ve basit işlevler için kullanılabilir. Promise, daha uzun ve karmaşık işlemler için kullanılabilir.
### Promise nasıl kullanılır?
Promise, belirli bir işlemin henüz tamamlanmamış olmasına rağmen, gelecekte belirli bir değer sağlamayı taahhüt eden bir JavaScript nesnesidir. Promise nesnesine göre işleyen bir fonksiyon yazmak için işlevi Promise döndürecek şekilde yazmanız gerekmektedir.
### Async/await nasıl kullanılır?
Async/await, JavaScript'te daha da geliştirilmiş bir Promise işlemidir. Async, bir işlevin asenkron işlevleri işlemesine izin verir. Await, bir işlemin tamamlanmasını beklerken, işlemin sonuçlarının çözümlenmesine izin verir. Async/await, Promise'yi yalnızca belirli bir async işlev sözdizimiyle kullanarak yönetmemizi sağlar.
### Birden fazla işlem nasıl yönetilir?
Promise ve Async/Await birden fazla işlemi yönetmek için kullanılabilir. Bu yapıları birden fazla işlemi birleştirmek için kullanabilirsiniz, daha anlaşılabilir ve daha iyi düzenlenmiş bir kodu sağlarlar.