Estoy acostumbrado a esperar, pero eslint lo odia en un bucle. A Eslint tampoco le gusta definir una función en un bucle. Por lo tanto, terminé con el siguiente fragmento en el script de Vuex:
// wait until the file is synchronized let waitTime = 100; let fileExists = false; const checkSync = (res, i) => { console.log(res.status); if (res.status === 200) { fileExists = true; console.log('Status 200, setting fileExists=true'); } else if (res.status === 404) { Vue.$log.debug(`Image not ready for download ${res.status}`); setTimeout(() => { waitTime = (i < 4) ? 200 : 1000; }, waitTime); console.log(`waitTime = ${waitTime}`); } }; for (let i = 0; !fileExists && i < 5; i += 1) { console.log(`fileExists = ${fileExists}`); axios.head(`${response.data.data.url}`).then(resp => checkSync(resp, i)); }Pero el registro revela que la primera declaración de registro dentro del ciclo se ejecuta una por una y la segunda declaración con una promesa/resolución se ejecuta cuando finaliza el ciclo. Podría reescribir el código para esperar e ignorar a eslint, pero espero finalmente obtener un conocimiento más profundo de las viejas promesas.
fileExists = false fileExists = false fileExists = false fileExists = false fileExists = false items.js:175 200 items.js:178 Status 200, setting fileExists=true items.js:175 200 items.js:178 Status 200, setting fileExists=true items.js:175 200 items.js:178 Status 200, setting fileExists=true items.js:175 200 items.js:178 Status 200, setting fileExists=true items.js:175 200 items.js:178 Status 200, setting fileExists=trueACTUALIZAR
La forma en que lo hago normalmente. Eslint se queja, pero los usuarios activan el código cuando cargan una nueva imagen, por lo que no necesito preocuparme por la eficiencia.
// wait until the file is synchronized on backend to www node let waitTime = 100; for (let i = 0; i < 5; i += 1) { // eslint-disable-next-line no-await-in-loop const head = await axios.head(response.data.data.url); if (head.status === 200) { return response.data; } else if (head.status === 404) { Vue.$log.debug(`Image not ready for download ${head.status}`); // eslint-disable-next-line no-loop-func setTimeout(() => { waitTime = (i < 4) ? 200 : 1000; }, waitTime); console.log(`waitTime = ${waitTime}`); } }// This function does promised function from array one-by-one const reducePromise = (items = [], callback) => ( items.reduce(async (promisedAcc, curr) => { const acc = await promisedAcc; const currentResult = await callback(curr); return acc.concat(currentResult); }, Promise.resolve()) ) // This Function resolves promise after time that passed by param const wait = (time = 0) => new Promise((resolve) => setTimeout(() => resolve(), time)) let fileExists = false; reducePromise([...Array(5).keys()], async (i) => { await axios.head(`${response.data.data.url}`) .then(res => { fileExists = true; console.log('Status 200, setting fileExists=true'); }) .catch(({ response: res }) => { Vue.$log.debug(`Image not ready for download ${res.status}`); const waitTime = (i < 4) ? 200 : 1000; return wait(waitTime) }) })