Promise.all with external resolve never resolves

Question

I'm working on a SPA (Single Page Application) project and need to load files in a dynamic and controlled way (CSS, HTML and JS)

I created the structure below (in this example only for CSS), but although the files are injected into the page, the promise is never resolved

A peculiarity of the structure is that the "resolve" and "reject" of each "promise" created are saved to be executed outside the original "promise" function

This is necessary because if the "promise" is successful, the control events must be removed, and if an error occurs, the element must be removed

'use strict';

const

  css=
    (
      ()=>
      {
        const
          load=
            url=>
            {
              return new Promise(
                (resolve,reject)=>
                {
                  let
                    link=document.createElement("link");
                  link.setAttribute("href",url);
                  link.setAttribute("rel","stylesheet");
                  link.addEventListener("load",onSuccess);
                  link.addEventListener("error",onError);
                  resolveAhead=resolve;
                  rejectAhead=reject;
                  document.head.appendChild(link);
                }
              );
            },
          onSuccess=
            event=>
            {
              event.target.removeEventListener("load",onSuccess);
              event.target.removeEventListener("error",onError);
              resolveAhead(event);
            },
          onError=
            event=>
            {
              document.head.removeChild(event.target);
              rejectAhead(event);
            };
        let
          resolveAhead,
          rejectAhead;
        return {
          load
        }
      }
    )();

Promise.all(
  [
    css.load("style1.css"),
    css.load("style2.css"),
    css.load("style3.css"),
    css.load("style4.css"),
    css.load("style5.css"),
    css.load("style6.css")
  ]
).then(
  response=>
  {
    console.log(response);
    alert("Well done");
  }
).catch(
  response=>
  {
    console.log(response);
    alert("Houston... we've had a problem here");
  }
);

Have you checked the console for errors? I don't see how your `css` object can have a "load" property. — Pointy, Apr 16 '21 at 23:53
yes, and no errors appears. "load" is exposed by the last "return" in the end of the function. — hericklr, Apr 17 '21 at 00:17

Nick Parsons · Accepted Answer · 2021-04-17T00:30:34.917

Your issue is that you have two variables:

let resolveAhead, rejectAhead;

The first time you call .load(), you set these to be the resolve and reject functions of the new Promise you're constructing. However, the next time you call .load(), you're again creating a new Promise, and overwriting these variables to be the resolve/reject of the new Promise. Only the resolve/reject functions from the last constructed Promise can then be called.

You can create references to these inside of your load() function instead, so that further calls to load() don't impact the already defined resolveAhead and rejectAhead functions:

'use strict';
const css = (() => {
  const load = url => {
    let resolveAhead, rejectAhead;
    
    const onSuccess = event => {
      event.target.removeEventListener("load", onSuccess);
      event.target.removeEventListener("error", onError);
      resolveAhead(event);
    };
    const onError = event => {
      document.head.removeChild(event.target);
      rejectAhead(event);
    };
    
    return new Promise(
      (resolve, reject) => {
        let link = document.createElement("link");
        link.setAttribute("href", url);

        link.setAttribute("rel", "stylesheet");
        link.addEventListener("load", onSuccess);
        link.addEventListener("error", onError);
        resolveAhead = resolve;
        rejectAhead = reject;
        document.head.appendChild(link);
      }
    );
  };
  
  return {load};
})();

Promise.all([
 css.load("https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"),
 css.load("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"),
]).then(response => {
  console.log(response);
  alert("Well done");
}).catch(response=> {
  console.log(response);
  alert("Houston... we've had a problem here");
});

Promise.all with external resolve never resolves

1 Answers1