时间戳

首页 > 解决方案 > Javascript，异步问题所需的解决方案

javascript - Javascript，异步问题所需的解决方案

问题描述

目前正在使用 Angular、socket.io 和 express 创建应用程序。但是，我遇到了一个异步问题，我很难找到解决方案。这是代码：

  export class WebsocketService {

  this.socket;

  public connect() {
    const token = sessionStorage.getItem('token');
    this.socket = io('http://localhost:3000', { query: { token: token } });
  }

  public getSocket () {

      // this function should only return this.socket when it is available

      return this.socket;

  }

这个想法是，首先在应用程序的某个地方与 websocket 连接一次，因此调用 io 函数一次：

    this.socket = io('http://localhost:3000', { query: { token: token } });

然后在应用程序的其余部分中，this.socket应该传递属性。但是，this.socket应该始终返回对象，如果它不存在，则应该等待它。

实现还应该处理应用程序中尝试调用getSocket并返回未定义的其他部分。基本上， getSocket 永远不应该返回 undefined 它应该等待连接然后返回this.socket。

我试着玩弄一些承诺，但我似乎找不到一个优雅的解决方案。

标签： javascriptangulartypescriptasynchronouses6-promise

解决方案

我不知道您为什么需要该connect方法，但这是一种方法

export class WebsocketService {

  getSocket() {

    // this function should only return this.socket when it is available

    if (!this.socket || (this.socket && this.socket.disconnected)) {

      this.socket = new Promise((resolve, reject) => {

        const token = sessionStorage.getItem('token');
        const s = io('http://localhost:3000', { query: { token: token } });

        s.on('connect', () => {
          console.log(socket.connected); // true
          resolve(s);
        });

        s.on('disconnect', () => {
          console.log(socket.disconnect); // true
          reject(s);
        });
      });
    }

    return this.socket;
  }
}

然后，用法是：

service.getSocket().then(socket => {
    // Use the socket
});

或者使用异步/等待：

const socket = await service.getSocket();
// Use the socket

推荐阅读