Javacript promise yapısı gerçekten öenmli bir konu. Öğrendikten sonra görmediğiniz, kullanmadığınız yer neredeyse olmayacak. Peki javascript promise nedir?
Promise: “Söz vermek”
Promise kelime manasıyla “söz vermek” olarak geçiyor. Yani biz bunu kullandığımızda fonksiyonumuz bize bir söz veriyor. Ve mutlaka bize işin sonucunu bildiriyor. Yani başarılı olsa da başarısız durumunda kalsa da bize bir çıktı vermek zorunda. Şimdi çalışma mantığına bakalım.
then ya da cath
Javascript/typescript ile uğraşıyorsanız şu şekilde çalışan fonksiyonlara denk geleceksiniz mutlaka. Pseudo kod şöyle
myFunction()
.then(res=>console.log("başarılı");).catch(err=>console.log("başarısız");)Yani fonksiyon çalışıyor ve eğer belirtilen koşullara uygun olarak işlemler gerçekleşti ise then kısmına eğer bir hata varsa catch kısmına düşüyor.
Javascript Promise Örnekleri
Yapacağımız örnek şu şekilde olacak kullacıdan girdi alacağız ve eğer “kodlib”e eşitse başarılı yani then yok eğer başarısız olursa catch kısmından uyarılar verdireceğiz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise Örnekleri</title>
</head>
<body>
<h4>Sonuç: </h4>
<p id="result"></p>
<input id="name" type="text" />
<button type="submit" id="btn">Tıkla</button>
<script src="promise.js" charset="utf-8"></script>
</body>
</html>Burası örnek bir Html kodu asıl kısım javascript dosyamızda gerçekleşiyor.
function checkName(name){
return new Promise((resolve, reject)=>{
if(name === "kodlib"){
resolve(name)
} else{
reject("Kullanıcı adınız yanlış.")
}
})
}Şimdi burayı açıklayalım. İlk olarak checkName adında bir fonksiyon oluşturduk ve input üzerinden gelen değeri aldık buraya kadar olan kısım Promise ile alakalı değil.
Sonra bir Promise return ediyoruz ve 2 argüman alıyor birisi resolve diğeri reject.
resolve “çözmek” ve reject “reddetmek” mânalarına geliyor. Yani eğer isim değeri “kodlib”e eşitse resolve ile Promise’in başarılı olduğunu, eğer “kodlib”e eşit değilse reject ile Promise reddediyoruz yani bir hata fırlatmış oluyoruz.
resolve(name) & reject(“Kullanıcı adınız yanlış.”) ?
Promise bunlardan biriyle sonlanacak. O zaman checkName fonksiyonumuzu şu şekilde kullanmamız gerekiyor.
function getResult(){
const name = document.querySelector('#name').value;
checkName(name).then((result)=>{
displayResult.textContent ="Kullanıcı:"+ result;
console.log("İsim doğru: " + result);
}).catch((error)=>{
displayResult.textContent=error;
console.warn("Hata var"+error);
})
}
Fonksiyon çalışıyor ve gerekli kontrollerin ardından resolve ya da reject durumuna geçiyor.
checkName içerisindeki resolve() içerisine verdiğimiz argüman then içerisinde bize dönüyor. then içerisine istediğimiz ismi verebiliriz ben result olarak vermeyi tercih ettim. Aynı şekilde catch kısmına da error yerine başka bir değişken adı verebilirsiniz.
Neden Promise kullanmalıyım?
Bunun hem çok kısa hem çok uzun cevabı olabilir. Ama şöyle düşünelim. Kullanıcı adı kontrolü yaptınız daha sonra giriş saatini veritabanına ekleyeceksiniz daha sonra kullanıcıya ait bilgileri getireceksiniz diyelim. Bunların her birini bir öncekinin “resolve” olduğu yerde yaparsak bir problem olmayacaktır. Çünkü eğer kullanıcı adı yanlışsa diğer kısımlara hiç girilmeyecek bile.
Diyelim kullanıcı adını kontrol ettikten sonra veritabanında sıkıntı oluştu: kullanıcı adı doğru ama veritabanına giriş saatini eklerken hata oluşacak ve kullanıcıya ait bilgileri getirmeye hiç çalışmayacak. Büyük çapta bir projelerde sadece if else yetersiz kalacaktır.
Kodların tamamı aşağıda ve Github hesabımda yer almaktadır.
const displayResult = document.querySelector("#result");
const btn = document.querySelector("#btn");
function checkName(name) {
return new Promise((resolve, reject) => {
if (name === "kodlib") {
resolve(name);
} else {
reject("Kullanıcı adınız yanlış.");
}
});
}
function getResult() {
const name = document.querySelector("#name").value;
checkName(name)
.then((result) => {
displayResult.textContent = "Kullanıcı:" + result;
console.log("İsim doğru: " + result);
})
.catch((error) => {
displayResult.textContent = error;
console.warn("Hata var" + error);
});
}
btn.addEventListener("click", getResult);
