在将响应发送到Express服务器应用程序的前端之前，res.send不会等待异步函数完成 [英] res.send is not waiting for my async function to finish before sending the response to the front end on my Express server app

问题描述

我正在尝试创建完整的堆栈应用程序，允许用户输入URL并使用Puppeteer捕获屏幕截图。在我的后端Express服务器上，我使用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的事件侦听器。当它被点击时，它会触发对后端的POST请求，后端运行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() => {
     
      let screenshot = await takeScreenshot(url)
      res.send({ result: screenshot })
    
  })();

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

这篇关于在将响应发送到Express服务器应用程序的前端之前，res.send不会等待异步函数完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！