Soy bastante nuevo en JavaScript, he buscado mucho en SO pero aún no he encontrado ninguna solución adecuada, que no implique el encadenamiento. Tengo dos oyentes de eventos, registrados en este orden.
El primer oyente ( module_a.js ) cambia un valor de formulario:
// First listener: handle submit and change recaptcha value form.addEventListener('submit', async refreshRecaptcha() { const { target: form } = e; const recaptchaField = form.querySelector('[name="catpcha"]'); // Simulate long running task await new Promise(resolve => setTimeout(resolve, 5000)); recaptchaField.value = token; }); El segundo oyente ( module_b.js ) en realidad envía el formulario:
// Second listener: POST data to server, with the recaptchaField changed form.addEventListener('submit', async postData(e) { e.preventDefault(); // Post data await fetch(url, { method: 'POST', body: formData }) });El segundo oyente debe "esperar" hasta que se complete el primero. O cualquier otro oyente asíncrono completo. No puedo "encadenar" los dos porque están en diferentes módulos.
¿Posible o imposible?
Puedes lograr esto usando Promesas.
const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('foo'); }, 300); }); myPromise .then(handleResolvedA, handleRejectedA) .then(handleResolvedB, handleRejectedB) .then(handleResolvedC, handleRejectedC);