Vue.js - 在 Websocket 上使用承诺？答案

【问题标题】：Vue.js - Using Promises on Websocket?Vue.js - 在 Websocket 上使用承诺？
【发布时间】：2020-02-20 20:24:18
【问题描述】：

我在使用带有 vue 的 websocket 时遇到了一个问题，因为我希望有一个变量来保持最后的就绪状态。 enter image description here

在第一行中，readyState 是 0，但在序列中 readyState 是 3。我怎样才能让 readyState 等于 3？

  const params = Object.entries({
  user: `${this.username}@${this.$props.uid}`,
  passwd: encodeURIComponent(this.passwd),
  cols: this.xterm.cols,
  rows: this.xterm.rows
})
  .map(([k, v]) => {
    return `${k}=${v}`;
  })
  .join("&");

this.ws = await new WebSocket(`ws://${location.host}/ws/ssh?${params}`);

// stateConection = true
// eslint-disable-next-line no-console
console.log(this.ws);

【问题讨论】：

使用WebSocket最简单的方法是使用vue-websocketnpmjs.com/package/vue-websocket等模块
await 用于等待一个正在解决的承诺。 new AnythingThatIsntAPromise 不会返回你可以 await 的 Promise - 话虽如此，this.ws 将是 WebSocket 的一个实例，所以当你的代码添加一个无意义的 await 时，代码仍然会像 await 不存在一样工作

标签： javascript vue.js websocket promise

【解决方案1】：

您可以创建一个Promise，它在open 上进行解析，并在error 或close 上拒绝。

const ws = new WebSocket(`ws://${location.host}/ws/ssh?${params}`);
const ready = new Promise((resolve, reject) => {
    ws.onopen = resolve;
    ws.onerror = reject;
    ws.onclose = reject;
});
await ready;

这将等待直到 websocket 打开，或者如果 websockets 关闭有或没有错误，则抛出错误。

【讨论】：