Estoy usando una serie de promesas para mantener el orden correcto de las operaciones para poder cargar algunos datos e inicializar algunos objetos antes de que se cargue mi aplicación/página.
En el proceso de hacer que mi código sea más modular para poder reutilizar algunas de las funciones, aparentemente me excedí en mi comprensión de las promesas y descubro que la cadena .then después de initApp() no se ejecuta nunca; la promesa es simplemente resuelto/rechazado al instante.
Mi función getData funciona perfectamente:
function getData(promises, callback) { let getDataComplete = new Promise(function (resolve, reject) { Promise.all(promises) .then(function () { if (callback && typeof callback === "function") { debug_log("getData: running callback"); callback(); } return resolve; }) .catch(function (error) { return reject; }); }); return getDataComplete; }
¿Pero la sección a continuación (que la ejecuta) no espera a que termine?
const initApp = new Promise((resolve, reject) => { let dataReturned = getData([ getPartners, getProducts, getCurrencies, getSites ]); if (dataReturned == resolve) { debug_log("resolve initapp") resolve; } else { debug_log("reject initapp") reject; } }); initApp .then(() => { initJSComponents(); }) .catch((error) => { debug_log("Problem during js component initialisation.", error); }) .then(() => { initDOM(); }) .then(function () { //some more stuff here }) .catch((error) => { debug_log("Problem during initialisation.", error); });
¿Algunas ideas? Estoy perplejo y lo he estado mirando y reescribiendo una y otra vez durante horas.
Tiene su función getData
devolviendo Promise
, pero no usó los métodos Promise#then
o Promise#catch
después de la ejecución. Entonces, después de llamar a esta función, obtendrá el objeto Promise
inmediatamente sin esperar. Probablemente deberías cambiar tu función initApp
así:
const initApp = new Promise((resolve, reject) => { getData([ getPartners, getProducts, getCurrencies, getSites ]).then(() => { debug_log("resolve initapp") resolve(); }).catch(() => { debug_log("reject initapp") reject(); }); });
Solo después de eso, su initApp
resolverá (o rechazará) su Promise
después de que la Promise
devuelta por la función getData
se resuelva (o rechace).
function getData(promises, callback) { return new Promise(function (resolve, reject) { Promise.all(promises) .then(function () { if (callback && typeof callback === "function") { debug_log("getData: running callback"); callback(); } resolve(); }) .catch(function (error) { reject(); }); }); }
const initApp = new Promise((resolve, reject) => { getData([ getPartners, getProducts, getCurrencies, getSites ]).then(allFine => { resolve(); }, somethingWrong => { reject(); }); }); initApp .then(() => { initJSComponents(); }) .catch((error) => { debug_log("Problem during js component initialisation.", error); }) .then(() => { initDOM(); }) .then(function () { //some more stuff here }) .catch((error) => { debug_log("Problem during initialisation.", error); });