Promise内的自定义事件为什么不响应？

Question

做websocket应用时有这样一种需求：

ws.onmessage = function(e) {
}

这个要响应做普通异步数据处理，但偶尔有同步处理的需求，于是我在ws.onmessage里自定义了一个事件：

ws.onmessage = function(e) {
//...
myData = procData(e.data);//处理我想要的数据

//以下发送自定义消息
var evt = new CustomEvent('Message', {
   detail: {data: myData},
 });
 window.dispatchEvent(evt);

}

 

 

var onMessage;

window.addEventListener("Message",onMessage,false);

//直接下面这样是有响应的
onMessage = function(e) {
   console.log(e.detail.data);
}

 

//但如果放到Promise内就没响应了，更奇怪的是ws.onmessage这个消息就会有响应
function ReceiveMessage() {
   return new Promise((resolve) => {
      onMessage = function(e) {
         console.log(e.detail.data);
         resolve(e.detail.data);
      }
      //ws.onmessage = function(e) {
      // 如果用这一段代码就有响应
      //}
   });
}

async function func1() {
   //...
   var ret = await ReceiveMessage();
   return (ret);
}

我是业余玩玩JS的，并不怎么会，很多代码都是网上找来的，谁能告诉我这是为什么？
我的目的就是要func1等到WS收到数据后才能返回，否则达到设定时间后超时返回

Answer 1

可能是因为函数 onMessage 的定义在 ReceiveMessage 函数内部，它是一个局部变量，因此不能被全局 window 访问。 可以将 onMessage 定义在全局作用域下，这样在任何地方都可以访问到。 同时，使用箭头函数可以保持环境的闭包。

var onMessage = (e) => {
console.log(e.detail.data);
};

window.addEventListener("Message", onMessage, false);

function ReceiveMessage() {
return new Promise((resolve) => {
resolve(e.detail.data);
});
}

async function func1() {
// ...
var ret = await ReceiveMessage();
return ret;
}