如何简化Puppeteer中Promise返回值至变量的赋值写法？

当然可以简化！你想要的就是直接把Promise的最终结果赋值给变量，不用先声明null再在回调里更新——这里最清爽的解决方案是用async/await语法，它能把异步代码写得像同步代码一样直观。

为什么你之前的写法无效？ #

你写的let msg = page.$('title').then(elem => {elem.text()});有两个问题：

1. then方法本身返回的是一个Promise对象，不是elem.text()的结果；
2. 箭头函数用大括号包裹时，你漏了显式return（如果写成elem => elem.text()就会自动返回结果，但即便如此，它还是个Promise）。

推荐的简洁写法 #

方式1：用async/await拆分步骤

把代码放在async函数里（await只能在async函数中使用），分步获取元素和文本：

async function getPageTitle() {
  const titleElem = await page.$('title');
  const msg = await titleElem.text();
  // 这里就能直接使用msg了
  console.log(msg);
}

方式2：链式await简化

可以把两步合并成一行，更紧凑：

async function getPageTitle() {
  const msg = await page.$('title').then(elem => elem.text());
  console.log(msg);
}

方式3：用Puppeteer内置的$eval（最推荐）

Puppeteer提供了page.$eval方法，能直接在页面上下文获取元素的属性，省去先获取元素的步骤，代码更简洁：

async function getPageTitle() {
  const msg = await page.$eval('title', elem => elem.textContent);
  console.log(msg);
}

方式4：直接获取document.title（针对title元素的特殊优化）

因为<title>标签的文本等价于document.title，所以可以直接用page.evaluate获取，这是最直接的方式：

async function getPageTitle() {
  const msg = await page.evaluate(() => document.title);
  console.log(msg);
}

核心思路 #

本质上就是通过await等待Promise完成，直接获取它的resolved值，这样就能把异步操作的结果直接赋值给变量，完全避免了先声明变量再在回调里更新的繁琐写法。

内容的提问来源于stack exchange，提问作者Alex