res.send在将响应发送到Express服务器应用程序上的前端之前没有等待我的异步功能完成

如何解决res.send在将响应发送到Express服务器应用程序上的前端之前没有等待我的异步功能完成

我正在尝试创建一个全栈应用程序，该应用程序允许用户输入URL并使用Puppeteer捕获屏幕截图。在我的后端快递服务器上，我正在使用app.post将响应发送到前端，以创建要下载的图像。

这是我的后端：

app.post('/api/screenshot',(req,res) => {
  const { url } = req.body

  let screenshot = takeScreenshot(url)
  res.send({ result: screenshot })
  // next()
})

async function takeScreenshot(url) {
  const browser = await puppeteer.launch({
    headless: true,args: ['--no-sandBox']
  });
  const page = await browser.newPage();
  await page.goto(url,{ waitUntil: 'networkidle0' });
  const screenshot = await page.screenshot()

  await browser.close();
  return screenshot;
}

我的前端JS具有ss-btn的事件侦听器。单击后，它将触发对后端的发布请求，该后端运行takeScreenshot函数。然后生成下载链接

$("#ss-btn").on("click",function (event) {
  event.preventDefault();
  var url = $("#url").val().trim();

  $.post("/api/screenshot",{ url: url })
    .then(res => {
      const { result } = res
      const blob = new Blob([result],{ type: 'image/png' })
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = `your-file-name.png`
      link.click()
    })
});

现在，当我单击ss-btn时，我会立即弹出窗口，询问要保存图像的位置。但这看起来好像屏幕截图没有被发送回前端。 png文件已损坏，我无法打开它。

TIA

解决方法

尝试放置async / await函数来像这样一个接一个地执行代码：

 (async() => {
     
      let screenshot = await takeScreenshot(url)
      res.send({ result: screenshot })
    
  })();

await函数将执行您的代码，等待其完全完成并返回最终值，然后它将在async函数内执行下一个命令。

您必须await的结果takeScreenShot()。它是一个async函数，因此它返回一个诺言，最终可解决您的screenshot，因此要等待其完成并获取其值，您必须使用await或{{ 1}}兑现承诺：

.then()

更改：

制作请求处理程序app.post('/api/screenshot',async (req,res) => { const { url } = req.body try { let screenshot = await takeScreenshot(url) res.send({ result: screenshot }) } catch(e) { // catch errors and send error status console.log(e); res.sendStatus(500); } });，以便您可以使用async。
使用await等待屏幕截图结果。
添加await来捕获来自try/catch的拒绝。
如果有错误，则发送错误状态。