El siguiente ejemplo muestra un fragmento de mi aplicación. La suposición es: algunas funciones se ejecutan después de cargar el documento, otras solo después de la respuesta POST. En este momento, las devoluciones de llamada se colocan en la matriz y se ejecutan una vez que se completa la solicitud. Todo funciona como se esperaba. Me gustaría cambiar estas devoluciones de llamada a una Promesa que se activaría como ahora "Update.endRequest ()"; Me pregunto si es posible? Cualquier sugerencia es bienvenida. O una idea si se puede hacer mejor.
actualizar.js
class UpdateClass { constructor() { this.callbacks = []; } success(callback) { this.callbacks.push(callback); } endRequest() { this.callbacks.forEach(callback => callback()); } } const Update = new UpdateClass(); export default Update;archivo1.js
import Update from './update'; export default class File1Class { constructor () { this.init(); } init() { Update.success(this.update); exampleFunction(); } update() { exampleFunctionAfterUpdate(); } } function exampleFunction() { console.log('On document load 1'); } function exampleFunctionAfterUpdate() { console.log('After Update 1'); }archivo2.js
import Update from './update'; export default class File2Class { constructor () { this.init(); } init() { Update.success(this.update); anotherExampleFunction(); } update() { anotherExampleFunctionAfterUpdate(); } } function anotherExampleFunction() { console.log('On document load 2'); } function anotherExampleFunctionAfterUpdate() { console.log('After Update 2'); }aplicación.js
import Update from './update'; import File1Class from './file1'; import File2Class from './file2'; class AppClass { constructor () { this.init(); } init() { new File1Class(); new File2Class(); triggerfunction(); } } function triggerfunction() { const button = document.getElementById('trigger'); button.addEventListener('click', () => { xhr.open('POST', 'someUrl', true); xhr.onload = () => { if (xhr.status === 200) { Update.endRequest(); } }; xhr.send(someJsonData); }); } window.app = new AppClass();Puedes usar algo como esto
const promiseObj = new Promise((resolve,reject)=>{ exampleFunctionAfterUpdate(); anotherExampleFunctionAfterUpdate(); resolve(true); }); function triggerfunction() { const button = document.getElementById('trigger'); button.addEventListener('click', () => { xhr.open('POST', 'someUrl', true); xhr.onload = () => { if (xhr.status === 200) { // Update.endRequest(); promiseObj.then(()=> console.log('Functions executed')); } }; xhr.send(someJsonData); }); }