在不复制事件监听器的情况下触发事件时解决 Promise

Question

我正在尝试在 EventEmitter 事件被触发时解决一个 Promise。

包含函数接受一个参数并将其添加到堆栈中。然后将项目从堆栈中取出以进行任意处理，并触发 success 或 error 事件。

public async processData(payload: Payload) {
  // Push data onto a stack
  this._myStack.push(payload);

  return new Promise((resolve, reject) => {
    myEventEmitter.on('processSuccess', data => {
      resolve(data);
    });

    myEventEmitter.on('processError', error => {
      reject(error);
    });
  });
}

问题是每次将项目添加到堆栈时都会添加一个新侦听器。这意味着当processSuccess 或processError 事件被触发时，承诺将为堆栈上的每个项目返回。

示例：如果堆栈上有 11 个项目，并且发出 processSuccess，则 data 将返回 11 次。

当其中一个事件被发出而不返回堆栈上的每个项目时，有没有办法解决承诺？也就是说，如何在不为每个事件创建一堆事件监听器的情况下做到这一点？

Answer 1

假设您可以使用随事件发送的来自data 本身的有效负载识别信息（成功和错误），那么您可以这样做：

public processData(payload: Payload) {
    // Push data onto a stack
    this._myStack.push(payload);

    return new Promise((resolve, reject) => {

      function resolver(data) {
        // if this event belongs to this payload
        if (data.payload === payload) {
          resolve(data);
          clearHandlers();
        }
      }

      function rejecter(error) {
        // if this event belongs to this payload
        if (error.payload === payload) {
          reject(error);
          clearHandlers();
        }
      }

      // clear event handlers
      function clearHandlers() {
        myEventEmitter.removeListener('processSuccess', resolver);
        myEventEmitter.removeListener('processError', rejecter);
      }

      myEventEmitter.on('processSuccess', resolver);  
      myEventEmitter.on('processError', rejecter);
    });
}

如果您无法确定哪个有效负载对应于哪个事件，那么使用此通用结构的唯一方法是永远不要让相同的myEventEmitter 一次用于多个processData() 操作。这是因为您需要确保当processSuccess 或processError 事件发生时，您确切知道它属于哪个有效负载。您必须知道，以避免同时运行中的单独异步操作之间的交叉耦合。这可以通过四种方式实现：

1. 负载是每个事件的一部分，因此您可以比较它是否是正确的负载（就像我的第一个代码示例一样）。
2. myEventEmitter 对象永远不会在同时运行的操作之间共享。
3. 没有两个使用共享 myEventEmitter 的异步操作会同时运行。
4. 您以某种方式想出唯一的消息名称，以便为每个正在运行的单独有效负载侦听和触发。这也需要与事件触发方合作。

对于上面的选项 #2 或 #3，您可以使用以下代码：

public processData(payload: Payload) {
    // Push data onto a stack
    this._myStack.push(payload);

    return new Promise((resolve, reject) => {
      function resolver(data) {
        resolve(data);
        clearHandlers();
      }
      function rejecter(err) {
        reject(error);
        clearHandlers();
      }
      // clear event handlers
      function clearHandlers() {
        myEventEmitter.removeListener('processSuccess', resolver);
        myEventEmitter.removeListener('processError', rejecter);
      }

      myEventEmitter.on('processSuccess', resolver);  
      myEventEmitter.on('processError', rejecter);
    });
}

Answer 2

使用事件命名空间。参考https://css-tricks.com/namespaced-events-jquery/

为事件创建某种动态命名空间，并检查该命名空间以匹配公共事件侦听器。当任何命名空间匹配时解决 promise。

Answer 3

所以基本上为了一个好的答案，我需要更多的信息，但总的来说，你可以做到以下几点：

• 有效负载应该有一个唯一的 ID
• 数据响应应包含相同的 id
• 错误响应应该包含相同的 id

因此，基于此，您的有效负载对象应该是这样的：

{"id": ..., ....}

响应数据对象

{"id": ..., ....}

错误数据对象

{"id": ..., ....}

您可以轻松地执行以下操作：

class MyClass {
    private _myStack: Array<Payload>;
    private _promisesFunctions: Array<any>;

    constructor() {
        myEventEmitter.on('processSuccess', data => {
            this._promisesFunctions[data.id].resolve(data);
        });

        myEventEmitter.on('processError', error => {
            this._promisesFunctions[error.id].reject(error);
        });
    }

    public async processData(payload: Payload) {
        // Push data onto a stack
        this._myStack.push(payload);

        return await new Promise(async (resolve, reject) => {
            this._promisesFunctions[payload.id] = { resolve, reject };
        });
    }
 }

如果您没有这种可能性或者您无法控制这 3 个对象，请提供所有这 3 个对象的示例或至少提供有关此问题的更多信息，我会更新我的回复