Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodliblog
No Result
View All Result

Javascript Promise Nedir? Neden Kullanılır?

Enes Can Güneş by Enes Can Güneş
Mayıs 13, 2020
in javascript

Javacript promise yapısı gerçekten öenmli bir konu. Öğrendikten sonra görmediğiniz, kullanmadığınız yer neredeyse olmayacak. Peki javascript promise nedir?

Javascript promise nedir
Javascript promise nedir örnek kullanım

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);

ShareTweetShareSend
Enes Can Güneş

Enes Can Güneş

Yazılım Mühendisliği öğrencisi. Yazılım ile problem çözmekle uğraşan bir yazılım geliştirici. Javascript - Nodejs - Php

Related Posts

javascript var let const değişken tanımlama ve değişken türleri
javascript

JavaScript Değişken Tanımlama – var, let, const

Merhaba bu yazımda JavaScript ile değişken tanımlama (var, let, const) konusunu ve değişken türlerini anlatacağım. Umarım faydası olur iyi okumalar....

Ocak 2, 2021
29
Javascriptil ilçe
javascript

Javascript Json İl İlçe Seçimi

Bu blog yazımda javascript ile json dosyasını okuyup dinamik bir şekilde il ilçe seçimi yapmak. Projenin son kodlarını aşağıda vereceğim...

Ağustos 23, 2020
256
Javascript async await nedir
javascript

Javascript Async Await Nedir Nasıl Kullanılır?

Javascript async await nedir? Asenkron çalışmalar nerelerde kullanılır? Bundan önce Javascript promise nedir? adlı yazı yazmıştım. Bu yazımda ise async...

Temmuz 19, 2020
770
Javascript arguments nedir
javascript

Javascript Arguments Nedir? Kullanım Örnekleri

Javascript arguments nedir? Javascript programlama dilinde arguments diye bir kavram var. Arguments fonksiyon içerisinde kullanılabilen bir array benzeri yapıdır. Tam...

Mayıs 1, 2020
101
Next Post
Unity Matematik Metotları

Unity Matematik Metotları - En Çok Kullanılanlar

Javascript async await nedir

Javascript Async Await Nedir Nasıl Kullanılır?

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Önerilenler

Joi kullanımı

Nodejs Joi Kullanımı ve Örnekleri

Ocak 24, 2021
4
React native flatlist

React Native Flatlist Nedir? Kullanım Örnekleri

Mayıs 4, 2020
191
Awake, Start, Update, FixedUpdate, LateUpdate, OnEnable, OnDisable, SetActive Destroy

Unity Fonksiyonları – En Çok Kullanılanlar

Ağustos 16, 2020
433
Nodejs terminal uygulaması

NodeJs Terminal Uygulaması Nasıl Yapılır?

Temmuz 26, 2020
96

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Kodlib Hakkında

Kodlib Yazılım Hakkında bloglar içerir. Yazılım süreçleri, mühendislik ve bu süreçte yaşanan deneyimleri blog şeklinde sunar.
#EvdeKal
Copyright 2020 @kodlibcom

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Sosyal Medya

No Result
View All Result
  • React Native
  • Php
  • Javascript
  • Unity