javascript - 生成一系列按顺序运行的 Promise

Question

我正在尝试生成一个 Promise 数组以按顺序运行。我已经看到了很多关于此的提示，但无法让它在我的用例中运行。

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))
}

有什么建议吗？这只是拒绝，我不明白为什么

Answer 1

看起来您想在 Canvas 可用于所有子元素时解决主要 promise 。您可以使用Promise.All()为了这。

还应该注意的是，querySelectorAll 不会返回任何可以调用 .map 的内容。您必须根据 querySelectorAll 返回的内容创建一个数组 - 这是 NodeList 。

export default function generateIcons(){
  return new Promise((resolve, reject) => {

    const containers = document.querySelectorAll('.html2CanvasTarget');
    const promises = Array.from(containers).map(child => processIcon(child))

    Promises.All(promises).then(() => resolve());
  })
}