How do you chain HTML5 fetch()?

Question

I'm doing a series of file uploads using HTML5 API and I want to run a collection of Promises in succession and only do a final PUT when all files are uploaded.

Currently, this is what I have:

obj.attachments.forEach( (file) => {                                                              
  const request = fetch(`${window.location.origin}/api/cases/${obj.id}/attachment`, {             
    ...baseSettings,                                                                               
    body: file,                                                                                    
    headers: {},                                                                                   
  }).then((req) => req.json())                                                                     
    .then((json) => { console.log('upload ', json); });                                            
});                                                                                                


const request = fetch(`${window.location.origin}/api/cases`, putJSON(_.omit(obj, 'attachments')));
request.then((req) => req.json())                                                                  
       .then((json) => dispatch(receiveCase(json)));

Ideally, the obj.attachments would be transformed into a collection of Promises and the final fetch could be appended and they would all run in succession.

use a q package when all promises are done only then make a put call!! — kailash yogeshwar, Nov 05 '15 at 09:48
Only a slight modification from this question: http://stackoverflow.com/questions/31710768/how-can-i-fetch-an-array-of-urls-with-promise-all — Jonah Williams, Nov 05 '15 at 09:59

score 1 · Answer 1 · answered Nov 05 '15 at 10:42

thanks to Jonah, here's my solution:

return Promise.all(kase.attachments.map( (file) => {                                                  
  return fetch(`${window.location.origin}/api/cases/${kase.id}/attachment`, {                         
    ...baseSettings,                                                                                  
    body: file,                                                                                       
    headers: {},                                                                                      
  }).then((req) => req.json()).then( (json) => {                                                      
    console.log(json, file);                                                                          
  });                                                                                                 
})).then( files => {                                                                                  
  const request = fetch(`${window.location.origin}/api/cases`, putJSON(_.omit(kase, 'attachments'))); 
  return request                                                                                      
    .then((req) => req.json())                                                                        
    .then((json) => dispatch(receiveCase(json)));                                                     
});

How do you chain HTML5 fetch()?

1 Answers1