Tracking responses order in parallels requests and potential errors.

When submitting parallels requests, you are by definition unaware of the order of the eventual responses.

Furthermore, you need to know which request has eventually failed.

Rubico provides a nice way to resolve this problem.

In the following code, we launch four request toward 'jsonplaceholder'.
See how we can track each request by it's index.

Try to fecth a wrong url and see how the error is tracked.

You can test it here : TryCatch

const  { pipe, map, tryCatch } = rubico

const urls = [
  `https://jsonplaceholder.typicode.com/todos/23`,
  `https://jsonplaceholder.typicode.com/todos/13`,
  `https://jsonplaceholder.typicode.com/todos/4`,
  `https://jsonplaceholder.typicode.com/todos/14`
];

const urlsIndexed = urls => urls.map((url, index) => ({ url, index }));


const appDiv = document.getElementById('app');

appDiv.innerHTML = `
  <div style='display:flex'>
    <div style='width:70px;text-align:center'>index</div>
    <div style="width:100px;text-align:center">id</div>  
    <div style="width:300px;text-align:center">title</div>      
  </div></br />`;


const format_result= (index, id, title) => `
  <div style='display:flex'>
    <div style='width:70px;text-align:center'>${index}</div>
      <div style="width:100px;text-align:center">${id}</div>  
    <div style="width:400px;">${title}</div>  
  </div>`;

const errorThrower = tryCatch(
  async ({ url, index }) => {
    let req = await fetch(url);
    let resp = await req.json();
    return format_result(index, resp.id, resp.title);
  },
  (err, { url, index }) => {
    log('Error : ' + index);
  }
);

function log(msg) {
  if (!msg) return;
  appDiv.innerHTML += `${msg}`;
}

map(pipe([errorThrower, log]))(urlsIndexed(urls));