JavaScript Promise 返回数组为何显示 undefined？

大家好，我们又见面了啊~本文《JavaScript Promise 返回数组为何显示 undefined？》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

javascript promise 返回数组为何显示 undefined

在使用 javascript promise 处理异步操作时，有时会出现返回数组但无法正确访问其元素的情况。

问题中的代码中，使用了 promise 来处理多个元素的截图，并在每个截图完成后将数据加入 imgs 数组。然而，直接访问 e[0] 会显示 undefined，且 e.length 也为 0。

解决方案

为了解决这个问题，需要将 resolve(imgs) 修改为以下代码：

if (imgs.length === element.length) {
  resolve(imgs);
}

同时，将这段代码移动到 imgs.push(page.todataurl("image/jpeg", 1.0)) 后面。只有当所有截图完成后，才会触发 promise 的 resolve 方法，确保 imgs 数组中包含了所有元素。

修改后的代码如下：

let element = document.querySelectorAll('.test')
let promise = new Promise((resolve,reject) => {
  let imgs = []
  for (var i = 0; i < element.length; i++) {
    html2canvas(element[i],{
        useCORS: true,
        allowTaint: false,
        logging: true
    }).then(function(canvas) {
        let ctx = canvas.getContext("2d")
        let page = document.createElement("canvas")
        page.width = canvas.width
        page.height = canvas.height
        page.getContext("2d").putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0)
        imgs.push(page.toDataURL("image/jpeg", 1.0))
        if (imgs.length === element.length) {
          resolve(imgs);
        }
    })
  }
})
promise.then(e => {
    console.log(e, e.length)
})

这样修改后，会在所有截图完成后 resolve promise，确保 e 数组已填充完整，可以正确访问其元素。

今天关于《JavaScript Promise 返回数组为何显示 undefined？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！