当JavaScript浏览器中有Promise.all（）时，如何从Puppeter中的page.evaluate（）返回数据

我想找到页面中所有图像的平均颜色。我正在使用Puppeter启动chromium，然后在浏览器中运行javascript

问题是我正在使用Promies.all异步计算浏览器中的所有颜色

我想将计算出的图像颜色返回到page.evaluate。我该怎么做？可能吗

下面的代码不起作用，因为imgcolors显然没有定义，它在Promise.all回调中返回

   const returned = await page.evaluate(async () => {
   const fac = new FastAverageColor();
   const imgs = Array.from(document.querySelectorAll('img'));
   const imgpromises = imgs.map(img => fac.getColorAsync(img.src));


   Promise.all(imgpromises).then(imgcolors => { return imgcolors;});

   return {
     document:{
       height: document.body.scrollHeight, 
       width:document.body.scrollWidth 
     },
     imgcolors:imgcolors
   };
 });

我尝试过以下方法：

Promise.all(imgpromises).then(imgcolors => { 
      
      return {
        elements:elements, 
        document:{
          height: document.body.scrollHeight, 
          width:document.body.scrollWidth 
        },
        imgcolors:imgcolors
      };
    });

现在我不再将数据返回到page.evaluate puppeter函数。所以返回的常量是未定义的

怎么做？提前谢谢你

在函数中，您可以返回一个承诺，该承诺将解析为一个值。在本例中，Promise.all返回一个Promise，您可以将其链接以返回所需的值。看起来是这样的：

const returned = await page.evaluate(() => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  return Promise.all(imgpromises).then(imgcolors => { 
    return {
      document:{
        height: document.body.scrollHeight, 
        width: document.body.scrollWidth 
      },
      imgcolors: imgcolors
    };
  });
});

或者，由于您使用的是异步函数，因此可以使用wait运算符等待解析值：

const returned = await page.evaluate(async () => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  const imgcolors = await Promise.all(imgpromises);
  return {
    document:{
      height: document.body.scrollHeight, 
      width: document.body.scrollWidth 
    },
    imgcolors: imgcolors
  };
});

请注意，只能返回，即可以是JSON.stringify'd的内容。看起来imgcolors应该是可序列化的，但在其他情况下，您可能需要将值转换为可序列化的内容。

在函数中，您可以返回一个承诺，该承诺将解析为一个值。在本例中，Promise.all返回一个Promise，您可以将其链接以返回所需的值。看起来是这样的：

const returned = await page.evaluate(() => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  return Promise.all(imgpromises).then(imgcolors => { 
    return {
      document:{
        height: document.body.scrollHeight, 
        width: document.body.scrollWidth 
      },
      imgcolors: imgcolors
    };
  });
});

或者，由于您使用的是异步函数，因此可以使用wait运算符等待解析值：

const returned = await page.evaluate(async () => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  const imgcolors = await Promise.all(imgpromises);
  return {
    document:{
      height: document.body.scrollHeight, 
      width: document.body.scrollWidth 
    },
    imgcolors: imgcolors
  };
});

---

请注意，只能返回，即可以是JSON.stringify'd的内容。看起来imgcolors应该是可序列化的，但在其他情况下，您可能需要将这些值转换为可序列化的值。

非常感谢Steve！很有魅力。非常感谢你，史蒂夫！工作起来很有魅力。