I'm super new with promises, I'm trying to implement them but I have this error
Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded I'm also getting problem using Promise.all().then() because it expected one argument. Environments: Angular v12 and Three.js I hope that someone could help me, thanks in advance.

  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];
  } 

CodePudding user response：

There are a few things to improve in the code, one that will possibly (but maybe not) fix the exception.

The exception appears to be thrown by fontFaceObserver whose docs indicate that the default loading timeout is 3 seconds (3000ms). Perhaps try a longer timeout, as those docs suggest, with the optional second parameter to load.

Meanwhile, code improvements that are a must for the code to work at all...

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];
}

CodePudding user response：

Hi @danh thanks to answer me. I solved with your help the problem about the promises (code above), then I tried to change the default loading timeout in 6 seconds and I got this error Error: Uncaught (in promise): Error: 6000ms timeout exceeded . So I think that increasing timeout doesn't change the result

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