javascript - promise ，我在获取另一个函数的返回时遇到一些问题

Question

我有一个 Canvas ，我想将其下载为 PNG 图像，我可以正常工作，但我想让我的用户选择文件的名称。

我试图让他带着 promise 写下文件名。但我的问题是，我不能创建一个函数，向用户询问文件的名称，并在返回名称时开始下载吗？这是我的代码:

function downloadAsPNG() {
  //Download the image
  let image = new Image();
  image.src = document.getElementById("defaultCanvas0").toDataURL("image/png");
  new Promise(function(nameOfFile) {
    nameOfFile(askNameOfFile());
  }).then(function(result) {
    let nameFile = result + ".png";
    document.getElementById("downloadPNG").download = nameFile;
    return document.getElementById("downloadPNG").href = image['attributes']['src']['nodeValue'];
  });
}

这是我要调用的函数来了解文件名:

function askNameOfFile() {
  let nameOfFile = '';
  let inputNameHTML = "<form id='FormFileName'><input type='text' id='nameOfFile'><input type='submit' id='sendNameOfFile'></form>";
  document.getElementById('NameOfFileContainer').innerHTML = inputNameHTML;
  document.getElementById('FormFileName').addEventListener('submit', function(event) {
    event.preventDefault();
    nameOfFile = event.target.childNodes[0].value;
    return nameOfFile;
  });
}

我知道，我可以简单地编写我在 promise 中拥有的内容，而不是使用第二个函数，但我想使用该函数和其他函数，例如将文件上传到服务器或下载为 JPEG。

Answer 1

你可以尝试askNameOfFile()返回一个promise，如下所示:

function downloadAsPNG() {
  askNameOfFile().then(function(result) {
    console.log('result ==> ' , result);
  });
}


function askNameOfFile() {
let nameOfFile = '';
let inputNameHTML = "<form id='FormFileName'><input type='text' id='nameOfFile'><input type='submit' id='sendNameOfFile'></form>";
document.getElementById('NameOfFileContainer').innerHTML = inputNameHTML;

return new Promise((resolve,reject) => {
  document.getElementById('FormFileName').addEventListener('submit',      function(event) {
    event.preventDefault();
    nameOfFile = event.target.childNodes[0].value;
    resolve(nameOfFile);
  });




});
  

}

<button onclick="downloadAsPNG()">Ask for File Name asdf</button>

<div id="NameOfFileContainer"></div>