如何在文件阅读器中等待 canvas loadFromJSON

Question

我正在尝试发出 html canvas.loadFromJSON 异步请求，但我无法使其工作。我有一个接受 json 文件的输入文件字段。在输入字段更改时，我打开一个新的文件阅读器，在文件阅读器的 onload 事件中，我在画布中加载上传文件的 json。

这是检测输入字段变化事件并加载json的代码：

jsonField.value.addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = async function (f) {
    var data = f.target.result;

    
    initCanvas(canvas, canWrapper);

    imgField.value.addEventListener("change", handleImageSelect);

    try{
        await loadJSONTemplate(data);

        //--- Any code here does not wait for loadJSONTemplate method to finish
    }catch (error) {
        // Handle error if loadFromJSON fails
    }

    //--- There is a code block here which should run after loadFromJSON has completed execution.
    await nextTick();

    watchingCanvasGradient.value = true;
  };
  reader.readAsText(file);
});

这是接受 json 并将数据加载到画布中的函数：

async function loadJSONTemplate(json) {

  return new Promise((resolve, reject) => {
    canvas.loadFromJSON(json, () => {
      // Have more code here to run 
      resolve();
    }, (error) => {
      reject(error);
    });
  });

}

任何人都可以帮助我，我错过了什么或做错了什么？谢谢。

我试图将 loadJSONTemplate 放在 try/catch 中，但是 try 块中的代码没有等待异步函数完成执行。它应该在 canvas.loadFromJSON 执行完成后运行一些代码。