[]
React Async süreçlere dair bir soru
orta seviye react bilgim var. yani mimarisindne çok anlamıyor olsam da çoğu şeyi yazabilirim falan gibi. istiyorsanız alt seviye de diyebilirsiniz.
neyse, şimdi bir case'i (hobi projem bu arada), temiz bir şekilde yazmak/yönetmek istiyorum.
ben bunu kendi bildiğim amele yöntemlerle yazdım çalıştırdım, ama biliyorum ki bunlar doğru yollar değil. (useeffectler vs. kullandım)
case şu:
Bir kullanıcı bir fotoğraf çekiyor, bu fotoğrafla bir servise bağlanıp bir yanıt alıyor.
aldığı yanıtı başka servise sorguluyor ve eğer sorguladığı servis boş dönerse, bu sefer aldığı yanıtı başka bir servise "kayıt açmak" için kullanıyor.
bunu bir dosyayı 5000 satır yapmadan halletmek istiyorum. ama en doğru yolu nedir, nasıl yapılmalıdır, o kısmı oturtamıyorum.
şimdi bir async fonksiyon içinde, await'lerle bu verileri çektirebilirim axioslardan.
örneğin;
const analyzeImage = async (){
let first = await axios.get blabla
let second = await axios.post(first) blabla
if(!second.length){
let third = await axios.post(first) blabla
}
}
gibi. ama bu çok içime sinmeyen bir yöntem.
ek olarak bu axios talpelerinin her birinde bir de error handling süreçleri de olacağı için, satılrar uzayacak. birinciye diyeceğim ki data yoksa şunu dön, error dönerse bunu dön.
ikincide benzer, üçüncüde benzer şekilde.
keza bu kesin doğru ve temiz yöntem değil.
ama sizce nasıl çözmek gerekir böyle bir case'i.
bana bu tür caseleri içeren bir boilerplate veya bir kod betiği göstermeniz mümkün müdür?
her fonksiyon, bir üstteki fonksiyonnu cevabını beklemeli harekete geçmek için. buradaki önemli nüanslarda nbiri bu.
neyse, şimdi bir case'i (hobi projem bu arada), temiz bir şekilde yazmak/yönetmek istiyorum.
ben bunu kendi bildiğim amele yöntemlerle yazdım çalıştırdım, ama biliyorum ki bunlar doğru yollar değil. (useeffectler vs. kullandım)
case şu:
Bir kullanıcı bir fotoğraf çekiyor, bu fotoğrafla bir servise bağlanıp bir yanıt alıyor.
aldığı yanıtı başka servise sorguluyor ve eğer sorguladığı servis boş dönerse, bu sefer aldığı yanıtı başka bir servise "kayıt açmak" için kullanıyor.
bunu bir dosyayı 5000 satır yapmadan halletmek istiyorum. ama en doğru yolu nedir, nasıl yapılmalıdır, o kısmı oturtamıyorum.
şimdi bir async fonksiyon içinde, await'lerle bu verileri çektirebilirim axioslardan.
örneğin;
const analyzeImage = async (){
let first = await axios.get blabla
let second = await axios.post(first) blabla
if(!second.length){
let third = await axios.post(first) blabla
}
}
gibi. ama bu çok içime sinmeyen bir yöntem.
ek olarak bu axios talpelerinin her birinde bir de error handling süreçleri de olacağı için, satılrar uzayacak. birinciye diyeceğim ki data yoksa şunu dön, error dönerse bunu dön.
ikincide benzer, üçüncüde benzer şekilde.
keza bu kesin doğru ve temiz yöntem değil.
ama sizce nasıl çözmek gerekir böyle bir case'i.
bana bu tür caseleri içeren bir boilerplate veya bir kod betiği göstermeniz mümkün müdür?
her fonksiyon, bir üstteki fonksiyonnu cevabını beklemeli harekete geçmek için. buradaki önemli nüanslarda nbiri bu.
async function fetchData() {
try {
const response1 = await axios.get('url1');
const response2 = await axios.get('url2', { params: { data: response1 } });
const response3 = await axios.get('url3', { params: { data: response2 } });
const response4 = await axios.get('url4', { params: { data: response3 } });
console.log('All requests completed:', result1, result2, result3, result4);
} catch (error) {
// add error handling method errorHandling(error)
console.error('Error:', error.message);
}
}
fetchData();
Şu şekil bir yolla da yapılabilir. catch'in içinde error'ı yakalarsın onun için de bir fonksiyon yazar error'larla ilgili yapmak istediklerini orada yapabilirsin. isteklerden birinde hata olursa zaten catch'e düşeceğinden tekrar tekrar bir öncekini kontrol etmeye gerek yok.
try {
const response1 = await axios.get('url1');
const response2 = await axios.get('url2', { params: { data: response1 } });
const response3 = await axios.get('url3', { params: { data: response2 } });
const response4 = await axios.get('url4', { params: { data: response3 } });
console.log('All requests completed:', result1, result2, result3, result4);
} catch (error) {
// add error handling method errorHandling(error)
console.error('Error:', error.message);
}
}
fetchData();
Şu şekil bir yolla da yapılabilir. catch'in içinde error'ı yakalarsın onun için de bir fonksiyon yazar error'larla ilgili yapmak istediklerini orada yapabilirsin. isteklerden birinde hata olursa zaten catch'e düşeceğinden tekrar tekrar bir öncekini kontrol etmeye gerek yok.
- ilgeru
(08.01.24 22:32:58)
soruna cevap değil ancak düşünmen gereken bir durum daha var, o da bu süreçlerden her hangi birisi gerçekleşirken oturumun kapatılması, react dediğin için browser'ın kapatılması, internetin kopması, server side için ise sunucunun kapanması, uygulamanın crash olması vs. timeoutlar vs.
keyword: state machine.
keyword: state machine.
- selam
(08.01.24 23:03:02)
1
