本文介绍了在将响应发送到Express服务器应用程序的前端之前，res.send不会等待异步函数完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建完整的堆栈应用程序，允许用户输入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()
})
});
TIA
推荐答案
尝试使用异步/等待函数逐个执行代码，如下所示：
(async() => {
let screenshot = await takeScreenshot(url)
res.send({ result: screenshot })
})();
await函数将执行您的代码，等待其完全完成并返回最终值，然后它将执行async函数内的下一个命令。
这篇关于在将响应发送到Express服务器应用程序的前端之前，res.send不会等待异步函数完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！