No puedo hacer que async-await funcione cuando uso postMessage y MessageChannel
const iframe = document.querySelector("iframe"); const sendMsgOnPort = async (msg) => { const channel = new MessageChannel(); const testfunc = async () => { channel.port1.onmessage = ({ data }) => { channel.port1.close(); if (data.error) { return data.error; } else { return data.result; } }; }; iframe.contentWindow.postMessage(`${msg}`, "*", [channel.port2]); await testfunc(); }; iframe.addEventListener( "load", async () => { console.log(await sendMsgOnPort("msg")); }, true );y el niño que tengo
window.addEventListener("message", (event) => { try { event.ports[0].postMessage({ result: `${event.data} back` }); } catch (e) { event.ports[0].postMessage({ error: e }); } });Puedo hacer que funcione con
const sendMsgOnPort = (msg) => new Promise((res, rej) => { const channel = new MessageChannel(); channel.port1.onmessage = ({ data }) => { channel.port1.close(); if (data.error) { rej(data.error); } else { res(data.result); } }; iframe.contentWindow.postMessage(`${msg}`, "*", [channel.port2]); }); pero hay alguna manera de hacer esto sin la new Promise((res, rej) => {
No.
Solo puedes (útilmente) await una promesa.
Necesita una new Promise para crear una si aún no tiene una (por ejemplo, si la API subyacente que está utilizando devuelve una promesa).
Aún no tienes uno (sobre todo porque onmessage es una API de devolución de llamada diseñada para manejar 𝑛 mensajes, no 1 mensaje).