Angular12+Three.js环境Promise超时及Promise.all传参错误求助

错误根因 #

• Promise.all参数错误：你在loadPromise方法内定义的allDone数组为局部变量，没有对外返回，调用this.loadPromise()无法拿到该数组，Promise.all()未接收到必填的promise可迭代参数，触发参数校验报错。
• 3000ms超时错误：你创建资源加载Promise时，仅在成功回调中引用了resolve函数，没有实际执行该函数（错误写法为.then(() => resolve)，正确应为.then(() => resolve())），导致所有Promise长期处于pending状态，超出FontFaceObserver默认3秒的超时阈值后抛出异常。另外现有代码中的加载成功日志为同步执行，无法真实反映资源的实际加载状态。

小优化：如果你的字体资源体积较大，可在load方法中传入第二个参数自定义超时时长，例如new FontFaceObserver("Open Sans").load(null, 5000)即可将超时时间调整为5秒。

修正后代码 #

1. 修正loadPromise方法 #

loadPromise() {
  const fontOpen = new Promise((resolve, reject) => {
    new FontFaceObserver("Open Sans").load().then(() => {
      console.log('Output Open Sans has loaded.');
      resolve();
    }).catch(reject);
  })

  const fontPlayfair = new Promise((resolve, reject) => {
    new FontFaceObserver("Playfair Display").load().then(() => {
      console.log('Output Playfair Display has loaded.');
      resolve();
    }).catch(reject);
  })

  // 预加载图片
  const preloadImages = new Promise((resolve, reject) => {
    imagesLoaded(document.querySelectorAll("img"), { background: true }, () => {
      console.log("Output img has loaded.")
      resolve();
    });
  });

  return [fontOpen, fontPlayfair, preloadImages];
} 

2. 修正onPageLoad方法 #

ngOnInit(): void {
  this.onPageLoad();
}

onPageLoad(options) {
  const promiseList = this.loadPromise();
  Promise.all(promiseList).then(() => {
    this.resize();
    this.setupResize();
    this.addObjects();
    this.render();
  }).catch(err => {
    // 可在此处添加资源加载失败的降级处理逻辑
    console.error('资源加载异常：', err);
  });
}

内容的提问来源于stack exchange，提问作者user11272367