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));
Latest comments (0)