做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收到数据后才能返回,否则达到设定时间后超时返回
可能是因为函数 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;
}