J'essaie de générer une gamme de promesses de courir séquentiellement. J'ai vu beaucoup de conseils à ce sujet mais je ne peux pas le faire courir dans mon cas d'utilisation.
export default function generateIcons(){
return new Promise((resolve, reject) => {
const containers = document.querySelectorAll('.html2CanvasTarget')
const promises = containers.map(child => processIcon(child))
promises.reduce((p, fn) => p.then(fn), Promise.resolve())
resolve()
})
}
function processIcon(child){
return new Promise((resolve, reject) => html2canvas(child).
then(canvas => uploadFromCanvas(canvas,
child.childNodes[0].className.split(' ')[1] + '.png'))
.then(resolve).catch(reject))
}
3 Réponses :
parce que Si possible, juste Await Code> Chaque appel de celui-ci dans un conteneurs code> est une nodelle, et les nodélistes n'ont pas de méthode code> .map code>, c'est pourquoi votre code lance une erreur. processicon code> retourne déjà une promesse, il n'est pas nécessaire d'utiliser le constructeur de promesses à nouveau em>. html2canvas code> renvoie déjà une promesse aussi, il n'y a donc pas besoin de constructeur de promesses nulle part (voir quelle est la promesse explicite construction antidiaptern et comment puis-je l'éviter? ) p> pour code> boucle. Parce que uploadfromCanvas code> renvoie également une promesse, et vous voulez l'attendre, renvoyez-le (ou attendre code> it) également: p> export default async function generateIcons() {
const containers = document.querySelectorAll('.html2CanvasTarget');
for (const container of containers) {
await processIcon(container);
}
}
function processIcon(child) {
return html2canvas(child, {backgroundColor:null})
.then(canvas => uploadFromCanvas(canvas, child.className.split(' ')[1] + '.png'))
.catch(console.log);
}
Selon votre question, vous pouvez utiliser Q Module Q pour cela
vous besoin de prendre un tableau vide et de pousser des promesses dedans et passez simplement ce tableau dans q méthode q ( q.allsettled code>), regardez un exemple avec un exemple P> Promise.all(promiseHolder)
.then((results) => {
return results;
})
.catch((err) => {
console.log('Promise will reject here', err);
throw err;
});
On dirait que vous voulez résoudre la promesse principale lorsque les toiles sont disponibles pour tous les éléments de l'enfant. Vous pouvez utiliser Promise.All () pour cela. Il convient également de noter que le QuerySelectorall ne renvoie rien à ce que vous pouvez appeler le .map sur. Vous devrez créer un tableau à partir de ce que le QuerySelectorall renvoie - qui est un NODELIST .
Vous devez également ajouter .Catch () pour gérer tout rejet de promesse.
Pour les meilleures pratiques, vous devez le gérer globalement en ajoutant un crochet dans votre fichier principal ( sever.js ). processus.on ("non anchants", (raison, promesse) => {console.log ("raison", raison); console.log ("promesse", promesse); // Envoyer mail si vous souhaitez notifier}); `