0
142
ViewsPasar una promesa en un detalle de evento personalizado
Estoy tratando de pasar un objeto de promesa a través de la propiedad de detail de un evento personalizado. El evento personalizado se pasa entre dos scripts que no comparten el mismo contexto global: uno es el script de contenido de una extensión y el otro es el script del sitio web principal.
scriptA.js
async function myFunc() {...} document.addEventListener('eventA', function (event) { const outputEvent = new CustomEvent('eventB', { detail: { promise: myFunc() } }); document.dispatchEvent(outputEvent); }); scriptB.js
document.addEventListener('eventB', async function (event) { const { promise } = event.detail; const result = await promise; console.log('result', result); }); Luego trato de llamar a esto (ya sea desde scriptB o desde un tercer script no relacionado, después de que se scriptA y scriptB ):
document.dispatchEvent(new CustomEvent('eventA')); Cuando imprimo el objeto de detail en el scriptA antes de enviar el evento, muestra el objeto de promesa correctamente, pero no llega al scriptB en absoluto: la propiedad de detail llega como null .
¿Me estoy perdiendo de algo?
Cuando creo un sandbox para replicarlo , funciona bien.
Sin embargo, en mi código real, no lo hace. Aquí hay capturas de pantalla del depurador de Chrome:
En la parte de despacho: 
En la parte del oyente: 
Si no incluyo la response (que es un objeto Promise ) en el detail enviado, todo llega correctamente.
1 answers
Answer question0
En primer lugar, gracias por la zona de pruebas: realmente acelera las cosas y dejó en claro a qué se enfrenta actualmente.
Al punto
async function myFunc() {...} document.addEventListener('eventA', function (event) { const outputEvent = new CustomEvent('eventB', { detail: { promise: myFunc() } }); document.dispatchEvent(outputEvent); });creo que el problema esta aqui
{ detail: { promise: myFunc() } }Aquí adjuntas la promesa de invocaciones... ¿por qué no asignar solo la delegación?
{ detail: { promise: myFunc } }El significado de esta línea es: asigne la referencia a mi promesa pero no la invoque (todavía). Parece ser tu intención original ya que más tarde usaste este código
document.addEventListener('eventB', async function (event) { const { promise } = event.detail; const result = await promise; console.log('result', result); });que se supone que es
const { promise } = event.detail; // promise here is the delegation to your function const result = await promise(); // properly invoke it and wait for it's resultPara mi comprensión ... no puede invocar una promesa en un bloque de código y esperar el resultado en otro. Espero que satisfaga sus requisitos originales