Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded

Question

我对承诺非常陌生，我正在尝试实现它们，但我遇到了这个错误
Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded 我在使用 Promise.all().then() 时也遇到了问题，因为它需要一个参数。环境：Angular v12 和 Three.js 我希望有人能帮助我，在此先感谢。

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

  onPageLoad(options) {
    this.loadPromise();
 
    Promise.all().then(() => {
      this.resize();
      this.setupResize();
      this.addObjects();
      this.render();
    });
  }

loadPromise() {
    // Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded
    const fontOpen = new Promise((resolve, reject) => {
      new FontFaceObserver("Open Sans").load().then(() => resolve);
      console.log('Output Playfair Display has loaded.');
    })

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

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

    let allDone = [fontOpen, fonPlayfair, preloadImages];
  }

Answer 1

代码中有几处需要改进，可能（但可能不会）修复异常。

异常似乎是由 fontFaceObserver 抛出的 whose docs 表示默认加载超时为 3 秒（3000 毫秒）。也许尝试更长的超时时间，正如那些文档所建议的那样，使用可选的第二个参数来加载。

同时，代码改进是代码正常工作所必需的...

onPageLoad(options) {
  const promises = this.loadPromise();  // assign the return value

  Promise.all(promises).then(() => {    // pass it to Promise.all
    this.resize();
    this.setupResize();
    this.addObjects();
    this.render();
  });
}

loadPromises() {
  // we don't construct new promises here, because fontOberserver already returns promises
  const fontA = new FontFaceObserver("Open Sans");
  const fontOpen = fontA.load(null, 6000);  // try a longer timeout, but no guarantee

  const fontB = new FontFaceObserver("Playfair Display");
  const fonPlayfair = fontB.load(null, 6000);

  // I'm not sure what imagesLoaded returns. Assuming it's not a promise... 
  const preloadImages = new Promise((resolve, reject) => {
    imagesLoaded(document.querySelectorAll("img"), { background: true }, resolve);
  });

  // this function must return the promises
  return [fontOpen, fonPlayfair, preloadImages];
}

Answer 2

嗨@danh 感谢回答我。我在你的帮助下解决了关于承诺的问题（上面的代码），然后我试图在 6 秒内更改默认的加载超时，但我得到了这个错误 Error: Uncaught (in promise): Error: 6000ms timeout exceeded 。所以我认为增加超时不会改变结果

async onPageLoad() {
    const promises = this.loadPromise();
    
    await Promise.all([promises]).then(() => {
      this.resize();
      this.setupResize();
      this.addObjects();
      this.render();
    });
  }

Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded

Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded

javascript

promise

three.js

angular-promise

angular