JavaScript’te asenkron işlemler nedir ve nasıl yapılır? Asenkron işlemler, belirli bir görevin tamamlanmasını beklemeden diğer işlemlerin devam etmesine izin veren işlemlerdir. Bu rehberde, JavaScript’te asenkron işlemler hakkında bilmeniz gereken her şeyi öğreneceksiniz.
Asenkron İşlemler Nedir?
JavaScript’te asenkron işlemler nedir? Asenkron işlemler, belirli bir görevin tamamlanmasını beklemeden diğer işlemlerin devam etmesine izin veren işlemlerdir. Bu, özellikle I/O işlemleri (veritabanı sorguları, dosya okuma/yazma, ağ istekleri vb.) gibi zaman alıcı işlemler sırasında kullanıcı deneyimini artırır. Asenkron işlemler, bir işlem tamamlanırken diğer işlemlerin engellenmemesini sağlar, böylece uygulama daha akıcı ve hızlı çalışır.
Senkron ve Asenkron İşlemler Arasındaki Fark Senkron işlemler, her bir işlemin tamamlanmasını bekler ve ardından bir sonraki işleme geçer. Bu, işlem süresini uzatabilir ve kullanıcı deneyimini olumsuz etkileyebilir. Asenkron işlemler ise aynı anda birden fazla işlemin yürütülmesine izin verir.
JavaScript’te Asenkron İşlem Teknikleri
Callback Fonksiyonları Callback fonksiyonları, belirli bir görevin tamamlanmasından sonra çağrılan fonksiyonlardır. Bu yöntem, asenkron işlemleri yönetmek için ilk kullanılan tekniklerden biridir.
function fetchData(callback) {
setTimeout(() => {
callback("Veri alındı!");
}, 2000);
}
fetchData((message) => {
console.log(message); // "Veri alındı!" 2 saniye sonra konsola yazılır
});Promises Promises, asenkron işlemleri yönetmek için daha modern ve temiz bir yol sunar. Bir Promise, üç durumda olabilir: pending (beklemede), fulfilled (tamamlandı) veya rejected (reddedildi).
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Veri alındı!");
}, 2000);
});
fetchData
.then((message) => {
console.log(message); // "Veri alındı!" 2 saniye sonra konsola yazılır
})
.catch((error) => {
console.error("Hata:", error);
});Async/Await Async/Await, Promises ile birlikte kullanılır ve asenkron kodun daha senkron bir şekilde yazılmasını sağlar. Async fonksiyonları, bir Promise döner ve Await ifadesi, Promises’in tamamlanmasını bekler.
async function fetchData() {
const data = await new Promise((resolve) => {
setTimeout(() => {
resolve("Veri alındı!");
}, 2000);
});
console.log(data); // "Veri alındı!" 2 saniye sonra konsola yazılır
}
fetchData();Callback Hell ve Çözümleri
Callback Hell Callback Hell, iç içe geçmiş callback fonksiyonları kullanıldığında kodun okunabilirliğinin ve bakımının zorlaşması durumudur.
function firstFunction(callback) {
setTimeout(() => {
console.log("First function");
callback();
}, 1000);
}
function secondFunction(callback) {
setTimeout(() => {
console.log("Second function");
callback();
}, 1000);
}
function thirdFunction(callback) {
setTimeout(() => {
console.log("Third function");
callback();
}, 1000);
}
firstFunction(() => {
secondFunction(() => {
thirdFunction(() => {
console.log("All functions are done!");
});
});
});Çözümleri Promises ve Async/Await kullanarak Callback Hell sorununu çözebilir ve kodun daha okunabilir olmasını sağlayabilirsiniz.
Promise Chain
function firstFunction() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("First function");
resolve();
}, 1000);
});
}
function secondFunction() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("Second function");
resolve();
}, 1000);
});
}
function thirdFunction() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("Third function");
resolve();
}, 1000);
});
}
firstFunction()
.then(secondFunction)
.then(thirdFunction)
.then(() => {
console.log("All functions are done!");
});Async/Await Kullanarak
async function runFunctions() {
await firstFunction();
await secondFunction();
await thirdFunction();
console.log("All functions are done!");
}
runFunctions();Asenkron İşlemlerde Hata Yönetimi
Asenkron işlemler sırasında hata yönetimi önemlidir. Hataları yakalamak ve yönetmek, uygulamanızın güvenilirliğini artırır.
Promises ile Hata Yönetimi
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
reject("Hata oluştu!");
}, 2000);
});
fetchData
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error("Hata:", error);
});Async/Await ile Hata Yönetimi
async function fetchData() {
try {
const data = await new Promise((resolve, reject) => {
setTimeout(() => {
reject("Hata oluştu!");
}, 2000);
});
console.log(data);
} catch (error) {
console.error("Hata:", error);
}
}
fetchData();JavaScript’te Asenkron İşlemler: İleri Teknikler
Promise.all Promise.all, birden fazla Promise’i paralel olarak çalıştırır ve tümü tamamlandığında bir sonuç döner. Bu, aynı anda birden fazla asenkron işlemi yönetmek için kullanışlıdır.
const promise1 = new Promise((resolve) => setTimeout(() => resolve("Veri 1"), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("Veri 2"), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve("Veri 3"), 3000));
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // ["Veri 1", "Veri 2", "Veri 3"]
});Promise.race Promise.race, verilen Promises’den hangisi önce tamamlanırsa onun sonucunu döner. Bu, en hızlı tamamlanan işlemin sonucunu almak için kullanılır.
const promise1 = new Promise((resolve) => setTimeout(() => resolve("Veri 1"), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("Veri 2"), 2000));
Promise.race([promise1, promise2]).then((value) => {
console.log(value); // "Veri 1"
});JavaScript’te Asenkron İşlemler: Sonuç ve Öneriler
JavaScript’te asenkron işlemler, modern web uygulamalarının performansını ve kullanıcı deneyimini artırmak için vazgeçilmezdir. Bu rehberde, callback fonksiyonları, Promises ve Async/Await gibi temel teknikleri öğrendik. Ayrıca, Callback Hell sorununu çözmenin yollarını ve asenkron işlemlerde hata yönetimini ele aldık. Son olarak, Promise.all ve Promise.race gibi ileri tekniklerle asenkron işlemleri daha verimli hale getirdik.
Asenkron işlemleri doğru bir şekilde kullanarak, JavaScript uygulamalarınızın performansını ve kullanıcı deneyimini önemli ölçüde artırabilirsiniz.
Sıkça Sorulan Sorular
Asenkron işlemler nedir? Asenkron işlemler, belirli bir görevin tamamlanmasını beklemeden diğer işlemlerin devam etmesine izin veren işlemlerdir.
Callback fonksiyonları nedir? Callback fonksiyonları, belirli bir görevin tamamlanmasından sonra çağrılan fonksiyonlardır ve asenkron işlemleri yönetmek için kullanılır.
Promises nedir? Promises, asenkron işlemleri yönetmek için kullanılan bir yapıdır ve bir işlemin sonucunu gelecekte döneceğini temsil eder.
Async/Await nedir? Async/Await, Promises ile birlikte kullanılır ve asenkron kodun daha senkron bir şekilde yazılmasını sağlar.
Callback Hell nedir ve nasıl çözülür? Callback Hell, iç içe geçmiş callback fonksiyonlarının kodun okunabilirliğini ve bakımını zorlaştırması durumudur. Promises ve Async/Await kullanarak bu sorunu çözebilirsiniz.
Promise.all ve Promise.race nedir? Promise.all, birden fazla Promise’i paralel olarak çalıştırır ve tümü tamamlandığında bir sonuç döner. Promise.race ise verilen Promises’den hangisi önce tamamlanırsa onun sonucunu döner.
Kaynaklar: