v2.5.2
Giriş yap

React Fetch API, Servisler videosunda neden yeni promise kullanıldı?

Anonim
405 defa görüntülendi ve 2 kişi tarafından değerlendirildi
2 2

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)
        }
    })
}
javascript react
Cevap yaz
Cevaplar (2)
tayfunerbilen
789 gün önce

fetch apisi de aslında promise dönüyor, yani muhtemelen fetch'i direk return etsekte aynı işi yapardı ancak ben kontrolü sevdiğim için resolve ve reject durumlarını bazı koşullara göre yönetmek ve bunu her servis istediğinde ayrıca yapmak istemediğim için tek fonksiyon içinde bu tarz bir yaklaşıma gittim, diğer türlü fetch'i direk return etsek her bir servis isteğinde then bloğu koyup res.json() dedikten sonra aynı kontrolleri vs. yapmak gerekecektir. toastr vs. daha global yönetmek adına böyle bir yaklaşıma gittim.

1
#011077
ebykdrms
789 gün önce

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.

0
#011076