Я использую dom-to-image.js для преобразования dom в png-образ. Поскольку dom-to-image.js использует обещание, код выполняется асинхронно. Я хочу выполнить. Then функцию синхронно.
У меня есть следующий код:
domtoimage.toPng(document.getElementById("main")).then(function(dataUrl) {
console.log(dataUrl);
}).catch(function(error) {
console.error('oops, something went wrong!', error);
});
console.log("this console should be executed after console.log(dataUrl)")
Сначала я хочу выполнить функцию.then перед выполнением console.log("this console should be executed after console.log(dataUrl)")
.
Пожалуйста, скажите мне, как это сделать.
Конечно, есть законные причины для принудительного выполнения обещания в js. Наиболее очевидным является случай, когда require
файл, который нужно инициализировать с использованием некоторого асинхронного содержимого, и оптимизация не является первостепенной задачей.
Похоже, пакет синхронизированного обещания кажется, что это должно сработать. В вашем случае (предупреждение - не проверено..):
const dti = () => docstoimage.toPng(document.getElementById("main"))
.then(dataUrl => console.log('url: ', dataUrl))
.catch(err => console.error('oops: ', err))
const sp = require('synchronized-promise')
const syncDti = sp(dti)
syncDti() // performs the 'synchronized version'
console.log("this console should be executed afterwards")
Вы не можете дождаться, когда в Javascript произойдет асинхронное вычисление. Единственное, что вы можете сделать, это объявить, что вы хотите, когда это вычисление будет выполнено.
Использование async/await делает код более похожим на то, что вы описываете, но вычисление по-прежнему асинхронно. Вы можете либо переместить журнал в then
:
domtoimage.toPng(document.getElementById("main")).then(function(dataUrl) {
console.log(dataUrl);
console.log("this console should be executed after console.log(dataUrl)")
}).catch(function(error) {
console.error('oops, something went wrong!', error);
});
Или используйте async/await, чтобы сделать это более похожим на обычный код:
async function myFunc(){
try{
dataUrl = await awaitdomtoimage.toPng(document.getElementById("main"))
console.log(dataUrl);
console.log("this console should be executed after console.log(dataUrl)")
}
catch(error) {
console.error('oops, something went wrong!', error);
}
Если вы можете использовать, я бы рекомендовал async/await
потому что это именно то, что вы хотите.
Ваш код должен быть структурирован следующим образом:
async function mySynchronousPromise(){
await domtoimage.toPng(document.getElementById("main")).then(function(dataUrl) {
console.log(dataUrl);
}).catch(function(error) {
console.error('oops, something went wrong!', error);
});
console.log("this console should be executed after console.log(dataUrl)")
}
Вы можете найти дополнительные обучающие онлайн: