改进从 Promise 内的 WebSocket 的 onmessage 事件获取结果

Question

我有一个 WebSocket 客户端发送消息并随后接收响应。 我希望能够在任何地方调用它并将响应存储回来，如下所示：

    // Global var
    var response

    // Connection to WS
    connect = () => {
        return new Promise(function(resolve, reject) {
            var server = new WebSocket('ws://localhost:8443/test/');
            server.onopen = function() {
                resolve(server);
            };
            server.onerror = function(err) {
                console.log(err)
                reject(err);
            };

        });
    }

    // Send request and receive message back
    async request(data){
        var request = {
            id: "test",
            data: data
        }

        connect().then((server) => {          

            server.send(JSON.stringify(request))

            server.onmessage = ({data}) => {
                response = JSON.parse(data) // save result
            }

        })
        .catch(function(err) {
            console.log(err)
        });
    }

    // Make request
    await request("test")
    
    // Access response
    console.log(response) // prints undefined

最后响应仍然是未定义的，因为当它到达console.log(response)时，还没有从异步调用中更新。

我能想到的唯一解决方案是添加这样的延迟：

    delay(){
        var promise = new Promise(function(resolve) {
            window.setTimeout(function() {
              resolve('done!');
            }, 10);
          });
          return promise;
    }

    // Make request
    await request("test")

    // Await for delay 
    await delay();
    
    // Access response
    console.log(response) // prints data received!

这是正确的方法吗？ 增加 10ms 的延迟就足以让它更新似乎很奇怪。 如果您有比我添加的延迟更好的解决方案，请告诉我。

Answer 1

您的connect()调用在它前面缺少await 。 最重要的是，您永远不会告诉您的 promise 等待响应本身。 这是一个快速修复。

await connect().then((server) => {          

  server.send(JSON.stringify(request))

  return new Promise((resolve, reject) => {
    server.onmessage = ({data}) => {
      response = JSON.parse(data) // save result
      resolve()
    }
  })
})

从技术上讲，您可以将await交换为return ，因为这是您的结束语句，并且您已将await放在您的request调用中。

return connect().then((server) => {          

  server.send(JSON.stringify(request))

  return new Promise((resolve, reject) => {
    server.onmessage = ({data}) => {
      response = JSON.parse(data) // save result
      resolve()
    }
  })
})

尽管它有效，但我鼓励您重构连接初始化过程 - 绝对没有理由在每次请求尝试时重新连接到 WS，除非您在完成时实际上与它断开连接。

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await