JSFiddle - React, Tailwind, and code Playground
by Abdul Ahmad
JavaScript
let retryHistory = {};
let uploads = [
{ pokemon: 'pikachu' },
{ pokemon: 'charmander' },
{ pokemon: 'bulbasaur' },
{ pokemon: 'squirtle' },
];
async function processUploads() {
try {
const responses = await Promise.all(uploads.map(u => request(u.pokemon)));
recordResponses(responses);
if (uploads.length > 0) processUploads();
} catch (e) {
console.log('error', e);
}
}
processUploads();
function recordResponses(responses) {
uploads = responses.filter(r => !r.success);
retryHistory = uploads.reduce((acc, item) => {
const req = acc[item.pokemon] || {};
const { history = [], numRetries = 0 } = req;
acc[item.pokemon] = {
history: [...history, item],
numRetries: numRetries + 1,
};
return acc;
}, retryHistory);
console.log('**** uploads ****', uploads);
console.log('**** retryHistory ****', retryHistory);
}
async function request(pokemon) {
const response = {
success: true,
data: undefined,
message: '',
statusCode: 200,
pokemon,
};
try {
const rawRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
if (!rawRes.ok) {
const error = await rawRes.text();
throw error;
}
const randomNum = getRandomInt(0, 100);
// - simulate errors
if (randomNum < 50) {
const errorStatusCode = [400, 401, 402, 403, 404, 409];
throw {
message: 'simulating error',
statusCode: errorStatusCode[getRandomInt(0, errorStatusCode.length - 1)],
};
}
const res = await rawRes.json();
response.data = res;
return response;
} catch (e) {
console.log('error', e);
response.success = false;
response.message = e.message || e;
response.statusCode = e.statusCode || 400;
return response;
...