8.3 KiB
Gün 18
Promise
Biz insanlar, belirli bir zamanda bir faaliyette bulunma sözü veririz veya alırız. Sözümüzü tutarsak başkalarını mutlu ederiz, ama sözümüzü tutmazsak hoşnutsuzluklara yol açabilir. JavaScript'te promise(söz) vermenin yukarıdaki örneklerle ortak bir yanı vardır.
Bir promise, JavaScript'te asynchronous işlemleri işlemenin bir yoludur. Asynchronous bir eylemin nihai başarı değeri veya başarısızlık nedeni ile işleyicilere izin verir. Bu, asynchronous yöntemlerin synchronous yöntemler gibi değerler döndürmesine olanak tanır: asynchronous yöntem, nihai değeri hemen döndürmek yerine, gelecekte bir noktada değeri sağlama sözü verir.
Bir Promise şu durumlardan birindedir:
- pending: başlangıç durumunda, ne tamamlandı ne de reddedildi.
- fulfilled: işlemin başarıyla tamamlandığı anlamına gelir.
- rejected: işlemin başarısız olduğu anlamına gelir.
Bekleyen bir promise ya bir değerle yerine getirilebilir(fulfilled) ya da bir sebeple (error) rejected olabilir. Bu seçeneklerden herhangi biri gerçekleştiğinde, bir sözün o zaman yöntemiyle sıraya alınan ilişkili işleyiciler çağrılır. (Karşılık gelen bir işleyici(handler) eklendiğinde promise zaten fulfilled veya rejected ise, işleyici(handler) çağrılır, bu nedenle asynchronous bir işlemin tamamlanması ile işleyicilerinin eklenmesi arasında bir yarış koşulu yoktur.)
As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.
Callbacks
Promise çok iyi anlamak için önce callback mantığını anlayalım. Aşağıdaki callback örneklerini görelim. Aşağıdaki kod bloklarında, callback ve promise arasındaki farkları fark edeceksiniz.
- callback Let us see a callback function which can take two parameters. The first parameter is err and the second is result. If the err parameter is false, there will not be error other wise it will return an error.
In this case the err has a value and it will return the err block.
//Callback
const doSomething = callback => {
setTimeout(() => {
const skills = ['HTML', 'CSS', 'JS']
callback('It did not go well', skills)
}, 2000)
}
const callback = (err, result) => {
if (err) {
return console.log(err)
}
return console.log(result)
}
doSomething(callback)
// 2 saniye sonra yazdırıcak
It did not go well
Bu durumda hata yanlıştır ve sonuç olan else bloğunu döndürür.
const doSomething = callback => {
setTimeout(() => {
const skills = ['HTML', 'CSS', 'JS']
callback(false, skills)
}, 2000)
}
doSomething((err, result) => {
if (err) {
return console.log(err)
}
return console.log(result)
})
// 2 saniye sonra yazdırıcak
["HTML", "CSS", "JS"]
Promise yapıcısı
Promise yapıcısını kullanarak bir promise oluşturabiliriz. new anahtar kelimesini, ardından Promise kelimesini ve ardından bir parantez kullanarak yeni bir promise oluşturabiliriz. Parantez içinde bir callback işlevi alır. Promise callback fonksiyonu, resolve ve reject fonksiyonları olmak üzere iki parametreye sahiptir.
// syntax
const promise = new Promise((resolve, reject) => {
resolve('success')
reject('failure')
})
// Promise
const doPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const skills = ['HTML', 'CSS', 'JS']
if (skills.length > 0) {
resolve(skills)
} else {
reject('Something wrong has happened')
}
}, 2000)
})
doPromise
.then(result => {
console.log(result)
})
.catch(error => console.log(error))
["HTML", "CSS", "JS"]
Yukarıdaki promise kararlılıkla yerine getirilmiştir. Promise'ın reject ile kararlaştırıldığı başka bir örnek verelim.
// Promise
const doPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const skills = ['HTML', 'CSS', 'JS']
if (skills.includes('Node')) {
resolve('fullstack developer')
} else {
reject('Something wrong has happened')
}
}, 2000)
})
doPromise
.then(result => {
console.log(result)
})
.catch(error => console.error(error))
Something wrong has happened
Fetch API
Fetch API'si, kaynakları (ağ genelindekiler dahil) almak için bir interface sağlar. XMLHttpRequest kullanan herkese tanıdık gelecektir, ancak yeni API daha güçlü ve esnek bir özellik seti sağlar. Bu görevde, url ve APIS istemek için fetch kullanacağız. Buna ek olarak, fetch API'sini kullanarak ağ kaynaklarına erişimde promise kullanım durumunu gösterelim.
const url = 'https://restcountries.com/v2/all' // countries api
fetch(url)
.then(response => response.json()) // API verilerine JSON olarak erişme
.then(data => {
// verileri almak
console.log(data)
})
.catch(error => console.error(error)) // yanlış bir şey olursa işleme hatası
Async ve Await
Async ve Await, promise yerine getirmenin zarif bir yoludur. Anlaşılması kolay ve yazması temiz.
const square = async function (n) {
return n * n
}
square(2)
Promise {<resolved>: 4}
Bir fonksiyonun önündeki async kelimesi, fonksiyonun bir promise vereceği anlamına gelir. Yukarıdaki kare fonksiyonu bir değer yerine bir promise verir.
Promise gelen değere nasıl erişiriz? Promise verilen değere erişmek için, wait anahtar sözcüğünü kullanacağız.
const square = async function (n) {
return n * n
}
const value = await square(2)
console.log(value)
4
Şimdi, yukarıdaki örnekte de görebileceğiniz gibi, bir fonksiyonun önüne async yazarak bir promise oluşturun ve bir promise değer almak için bekliyoruz. Async ve await birlikte çalışır, biri olmadan diğeri olamaz.
API verilerini hem promise yöntemini kullanarak hem de async ve await yöntemini kullanarak getirelim.
- promise
const url = 'https://restcountries.com/v2/all'
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error => console.error(error))
- async ve await
const fetchData = async () => {
try {
const response = await fetch(url)
const countries = await response.json()
console.log(countries)
} catch (err) {
console.error(err)
}
}
console.log('===== async and await')
fetchData()
🌕 Sen gerçeksin ve sözünü tuttun ve 18. güne ulaştın. Sözünü tut ve azimle meydan oku. Büyüklüğe giden yolda 18 adım öndesin. Şimdi beyniniz ve kaslarınız için bazı egzersizler yapın
Egzersizler
const countriesAPI = 'https://restcountries.com/v2/all'
const catsAPI = 'https://api.thecatapi.com/v1/breeds'
Egzersiz: Seviye 1
- Fetch kullanarak countriesAPI'sini okuyun ve country, capital, languages, population ve area adını yazdırın.
Egzersiz: Seviye 2
- Tüm kedi adlarını catNames değişkenine yazdırın.
Egzersiz: Seviye 3
- catsAPI'sini okuyun ve kedinin ortalama ağırlığını metrik birimde bulun.
- countriesAPI'sini okuyun ve en büyük(largest) 10 ülkeyi bulun.
- countriesAPI'sini okuyun ve dünyada resmi olarak kullanılan toplam dil sayısını bulun.
🎉 TEBRİKLER ! 🎉