React Fetch API, Servisler videosunda neden yeni promise kullanıldı?
React ile Proje Geliştirmek -12 / Fetch API, Servisler
Başlıklı video da request function oluştururken yeni bir promise açıyor tayfun abi ve daha kontrollü olsun diyor, bunun sebebi nedir orada promise oluşturmadan da devam edebilirdi kontrollü olmaktan kastı nedir?
Kod bu;
function request(url, data = false, method = 'GET') {
return new Promise(async (resolve, reject) => {
const options = {
method
}
if (data && method === 'POST') {
options.body = JSON.stringify(data)
}
const response = await fetch(url, options)
const result = await response.json();
if (response.ok && response.status === 200) {
resolve(result)
} else {
reject(result)
}
})
}
Video'yu izlemedim ama cevap gelmediği için şöyle bir yorum yapayım...
Promise kullanmasaydı ve request()
fonksiyonunu async
key'i ile tanımlasaydı da aynı işlemi yapabilirdi.
Promise kullanarak hangi durumda then()
veya hangi durumda catch()
bloğuna düşeceğini resolve()
ve reject()
fonksiyonlarıyla belirleyebildi.
request(url,data)
.then(result=>{
/* resolve() ile gönderilen result değeri buraya geldi */
})
.catch(result=>{
/* reject() ile gönderilen result değeri buraya geldi */
});
Peki aynı fonksiyonu Promise
olmadan yazsaydı?
function async request(url, data = false, method = 'GET') {
const options = {
method
}
if (data && method === 'POST') {
options.body = JSON.stringify(data)
}
const response = await fetch(url, options)
const result = await response.json();
if (response.ok && response.status === 200) {
return result;
} else {
throw result;
}
}
Böyle yazsaydık request()
fonksiyonunu şöyle kullanacaktık:
request(url,data)
.then(result=>{
/* return ile gönderilen result değeri buraya geldi */
})
.catch(result=>{
/* throw ile gönderilen result değeri buraya geldi */
});
Evet, Promise kullanmasa da olurmuş. :))
Belki fonksiyonu geliştirmeyi, anlamsal olarak ayrıştırmayı veya paralel istekler atabilme ihtimalini düşünmüştür ama sonra gerek kalmamıştır.
Mesela request()
fonksiyonunun paralel çalışacak 2 işlem yürütmesi gerekiyor ama bunların sadece birinin sonucunu alacak diyelim.
function request(url, data = false, method = 'GET') {
new Promise(async(resolve, reject) => {
setTimeout(()=>{ console.log("Ben de çalıştım!"); }, 4000);
});
return new Promise(async (resolve, reject) => {
const options = {
method
}
if (data && method === 'POST') {
options.body = JSON.stringify(data)
}
const response = await fetch(url, options)
const result = await response.json();
if (response.ok && response.status === 200) {
resolve(result)
} else {
reject(result)
}
})
}
Böylece request()
fonksiyonu çalıştığı anda ilk promise devreye girdi. Beklemeden 2.promise'ı return etti.
Tek fonksiyonda paralel iki işlem yürütmüş oldu. İlk promise 4 saniye sonra işlemini tamamlayacak. Ama request()
fonksiyonu mutlaka 2. promise'ın tamamlandığı zaman sonuç döndürecek.
Belki de sadece anlamsal olarak Promise kullanmak istemiş olabilir.
Yani request()
fonksiyonuna baktığı zaman burada asenkron bir işlem olduğunu anlamak Promise
adını görünce onun için daha hızlı şekilde anlaşılır oluyordur.