JavaScript 中的错误捕获不能正确捕获错误

Question

我正在开发一个使用 p5.js 库的 javascript 游戏。我正在尝试加载我自己的字体，我在其中使用 .ttf 文件，但有时 p5.js 无法正确加载字体。在这种情况下，我尝试使用 try 和 catch 方法检查是否发生这种情况，如果发生，将我的字体切换为始终有效的默认内置字体（不是 .ttf，只是内置）。这是我与该问题有关的代码：

function preload() {

  try {

    font = loadFont("assets/BebasNeue-Regular.ttf"); // Font from Google Fonts - https://fonts.google.com/specimen/Bebas+Neue#standard-styles

  } catch (error) {

    console.error("ERROR: " + error)
    console.log("Font was unable to load, using default font.");
    font = "Helvetica";

  }

  console.log("Assets preloaded...");

}

但是，每当我尝试运行我的代码时，我的画布不仅没有加载任何内容，而且错误仍然出现在控制台中。但是，我的 console.log 语句不存在。它是这样说的：

Not allowed to load local resource: blob:null/a07d873c-2d5e-4653-92f4-02fd085cc6e4
p5.js:48337 
???? p5.js says: It looks like there was a problem loading your font. Try checking if the file path (assets/BebasNeue-Regular.ttf) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)
p5.js:80410 Font could not be loaded assets/BebasNeue-Regular.ttf
(anonymous) @ p5.js:80410
assets/BebasNeue-Regular.ttf:1 Failed to load resource: net::ERR_FAILED

即使我的资产在我的文件夹中，当我尝试运行该程序时，它也不起作用。有谁知道如何修复/更改我的错误捕获语句？

编辑：我尝试了另一种错误捕获方式，它由loadFont() procedure 中的 p5 提供。这是我的新代码：

function preload() {

  font = loadFont("assets/BebasNeue-Regular.ttf", setup, fontError); // Font from Google Fonts - https://fonts.google.com/specimen/Bebas+Neue#standard-styles

  console.log("Assets preloaded...");

}

function fontError() { console.log("Font was unable to load, using default font."); font = "Helvetica"; }

function setup() {

  // Sets up the game, irrelevant to error.
  
}

这是我的代码下载链接，是否有帮助：https://www.mediafire.com/file/k4nm445dkxhv0i8/game.zip/file

Answer 1

正如documentation 所说：

在preload() 之外，您可以提供一个回调函数来处理 对象：

你应该像这样重构你的代码：

let font;

function preload() {
  loadFont("assets/BebasNeue-Regular.ttf", result => {
    console.log("Assets preloaded...");
    font = result;
  }, error => {
    console.error("ERROR: " + error)
    console.log("Font was unable to load, using default font.");
    font = "Helvetica";
  });
}

function setup() {
  // use the font
}