Tracking responses order in parallels requests and potential errors.
Tags: javascript, webdev, rubico
Published: 2021-09-13 13:38:52

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](https://rubico.land/) 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](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAHAOgCwE4A0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHhYBmAASk2ATwQBeADoghADzYBaWrAgBzakh7ChAJzUA+AAqxa8iNQPSA7hDYtpAJQCuAIwh+MQB6KStpFWoosX9YPh4AawBHXz4hKyiYgAdM6gAJeHN4PDd4aXtfah4vQj5fc2li1Pg5UmknaWzacz14WFhpNj5XHqhpJGkJFCt2NmzSJBCQgCtSAWz7UxY+WCgijAVsoL59jH4wEOGoPlIQ6FCWGcjqMVycvPyRob4h3qTSp1aNRpP14AZgWw3A5Sp5ynxzPtGnxCEMWOViqRsgJSK03OiQc1fK02O0euVKtV0eN+NUGmZYPJpAB+F6hd6vEJxBIpNIZGIsRohPJiKAQABuHSgqhAtGy2WsoTF4qs3BAuIQPDYEBxogAjAAmJAGgAMIAAvngaPRGMw1mraUIRExaXJpNJgF0INkStIwHLYeZ5ABhWhsGrSc3SJRNAInLLVHFQhqwdoxihRd0AAzmCyWq3W1E2tG2uyRh3kx34ZwuV1OtxCBskWbwmekObY80WyzWGy28B2ewORxONb4l2uDb1zdbIPbue7Bb7JYHZeHldH8HO47rNzuWBbbY7XfzvaL-cH5ZH1a3tcndz1B6iAF0ANwJ13J8ypgCS1H2GjwOMMYpmmESgRg-rZAAFNBKaAv+8AaAAlNGETQZ68EdIhGiRshyHvtERGftIcrZAAIhK0bSDcPC+AwggYAY8BsAAoggDFsAAQvIP5QNBADkZECQRCZkZR4oYE41BFPkAAqACyAAy1FZm2opUXIijwEoAlili9jyEghAIBoAl5O67oaZKWnKAJ7hQJ4SAAOwmtkGivpoOh6IYximIIRTmU4AFKhKFmWdZsgKMoagOU5eomm5Hlebo+hGCYZhFNYDwhMqEQvJZUzKlF2kynFLBIJIiXuZ5SHeWlfmZZYIBWNqbAIKFKqFe66m5WFoT+EKVhZoRPVzlEJF1OY-psAA+piviwGwMbQcFSGAlAsIeAgqFKBEalzpFtk6XpEAGQ4xmmeZbZWcVx26eVLlJbVWipb5GUBeY5kACTAGtGjmp14WFUd0U6bF0DxdVyV1W96X+RY1i-dAgN9V1BURXdYNlZDFVYND74tb9bUIKjeVjVZaPDaNLwkUU5gInJgojEU1FsEGobhiw0FtrQpDyNU0gYdIWH-XhaEejdFQsU08DJNRtCjB40iECxNRwd+olzu6CBQpi2QK0retyxgZ7QVrhXFGwDQglNM3za0i1sKtOGlPrUmbbLWKHNt8AW5Gs7utB9OlJh34IQB4t7ZL2sVHwBiCax5gM40kwCdIADU2EAf75pRFrUSEFUWo6iC8QJ2ApAGKhwBthAqLQQAhJX1ey9b5jUDT4kSlJ1AyeY8nKZnMZZr9LfmiNUR50RUHQccPrQRQ9OM8zrhFKU5fPvhGu-jhQE76Q+E02qGrwCXupMFgKCoCa2gmkgZqWtaDCiOcpDkLwAhOmwogWs+BD6GoIkcgSAqAgDoC-Jg5g4z8DVCmUQC58xVGyIkAw25LjQMCPwAAAnqDAmA9T3BwqbD+6hKy2lIDwcw3of7mmfOaIAA)

```js
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));
```