Sunucu tarafında oluşturulan Reaktif uygulamasında birden çok HTTP isteği nasıl yapılandırılır?

Question

Şu anda veriyi eş zamanlı olarak getirmek ve depoda ilk durum olarak ayarlamak için aşağıdaki sunucu tarafı oluşturma mantığını (reactjs + nodejs + redux kullanarak) kullanıyorum.

fetchInitialData.js

export function fetchInitialData(q,callback){ 
     const url='http://....' 
     axios.get(url) 
      .then((response)=>{ 
       callback((response.data)); 
      }).catch((error)=> { 
      console.log(error) 
     }) 
    } 

Verileri uyumsuz getir ve ilk seferinde geri arama kullanarak sayfa yükleri depolamak için de çıkışını yükleyin.

handleRender(req, res){ 
fetchInitialData(q,apiResult => { 
    const data=apiResult; 
    const results ={data,fetched:true,fetching:false,queryValue:q} 
    const store = configureStore(results, reduxRouterMiddleware); 
    .... 
    const html = renderToString(component); 
    res.status(200); 
    res.send(html); 
    }) 
} 

Ben ilk sayfa yüklemesinde 4 ila 5 API çağrıları dolayısıyla sayfa yüklendiğinde birden çağrı yapmaya ulaşmak için kolay bir yol olup olmadığını görmek için kontrol düşündüm yapmak için bir gereksinim var.

API çağrılarını zincirlemeli ve farklı API çağrılarından gelen yanıtı manuel olarak birleştirip ilk durumu yüklemek için geri göndermem gerekir mi?

Güncelleme 1: Ben axios.all yaklaşım kullanarak düşünüyorum , birinin bu ideal yaklaşımdır varsa bana bildirin olabilir?

Answer 1

İsteklerin sırayla değil paralel olarak gerçekleştiğinden emin olmak istersiniz.

Her API çağrısı için bir Promise oluşturarak bunu daha önce çözdüm ve hepsinin axios.all() ile beklemesini sağladım. Aşağıdaki kod temel olarak sözde koddur, daha sonra daha iyi bir uygulamaya girebilirim.

handleRender(req, res){ 
    fetchInitialData() 
    .then(initialResponse => { 
     return axios.all(
     buildFirstCallResponse(), 
     buildSecondCallResponse(), 
     buildThirdCallResponse() 
    ) 
    }) 
    .then(allResponses => res.send(renderToString(component))) 
} 

buildFirstCallResponse() { 
    return axios.get('https://jsonplaceholder.typicode.com/posts/1') 
    .catch(err => console.error('Something went wrong in the first call', err)) 
    .then(response => response.json()) 
} 

Tüm yanıtların bir diziye nasıl eklendiğine dikkat edin.

Redux dökümantasyonu sunucu tarafında biraz işlem görüyor, ancak bunu zaten görmüş olabilirsiniz. redux.js.org/docs/recipes/ServerRendering

Ayrıca, .all()'un ne yaptığını görmek için Promise belgelerine göz atın. Herhangi bir şey belirsiz ise haberim olsun.

Answer 2

express-batch veya GraphQL başka bir seçenek ile deneyebilirsiniz.

Answer 3

Ayrıca, Redux-Sagas'ı birden fazla API çağrısı tetiklemek için saf Redux eylemlerini kullanmak ve tüm bu çağrıları saf eylemler kullanarak işlemek için de kullanabilirsiniz.