Vue中Promise结合EventBus调用返回undefined问题求助

首先，咱们来拆解下你遇到的核心问题：你的completed()函数没有返回任何Promise实例——它只是在内部注册了一个事件监听器，而EventBus.$on的返回值并不是Promise，所以当你调用completed().then(...)时，实际上是在undefined上调用.then()，这自然会导致后续逻辑失效。

修复原代码的核心思路 #

我们需要让completed()直接返回一个Promise，这个Promise会在对应的queue-action事件触发且携带completed action时被resolve，收到不匹配的action时则reject。同时要注意，每次调用completed()应该只监听一次事件，避免重复绑定监听器导致多次触发。

修复后的代码如下：

import {EventBus} from "./EventBus";

export function completed() {
  // 让函数直接返回Promise实例
  return new Promise((resolve, reject) => {
    // 创建一次性监听器，触发后自动移除
    const eventHandler = (e) => {
      if(e.action === 'completed'){
        resolve(e.queueItem);
        // 触发后移除监听器，避免重复响应
        EventBus.$off('queue-action', eventHandler);
      } else {
        reject(new Error('Received unexpected action in event'));
        EventBus.$off('queue-action', eventHandler);
      }
    };
    EventBus.$on('queue-action', eventHandler);
  });
}

export function emitAction(action, queueItem) {
  EventBus.$emit('queue-action', { action, queueItem });
}

现在调用completed()时，你会得到一个真正的Promise对象，当emitAction('completed', item)触发时，Promise就会resolve并传递item，.then()里的逻辑就能正常执行了。

关于类封装思路的优化 #

如果你想用类来封装队列事件逻辑，可以调整成下面的结构，让监听方法直接返回Promise，同时管理好监听器的生命周期：

import {EventBus} from "./EventBus";

export class QueueEvent {
  emitAction(action, queueItem){
    EventBus.$emit('queue-action', { action, queueItem });
  }
}

export class QueueEvents extends QueueEvent {
  constructor(){
    super();
    // 存储监听器引用，方便后续清理
    this.activeListeners = new Map();
  }

  listenForComplete() {
    return new Promise((resolve, reject) => {
      const handler = (e) => {
        if(e.action === 'completed'){
          resolve(e.queueItem);
          this._removeListener('completed', handler);
        } else {
          reject(new Error('Action does not match "completed"'));
          this._removeListener('completed', handler);
        }
      };
      this.activeListeners.set('completed', handler);
      EventBus.$on('queue-action', handler);
    });
  }

  // 私有方法：移除指定监听器
  _removeListener(actionKey, handler) {
    EventBus.$off('queue-action', handler);
    this.activeListeners.delete(actionKey);
  }

  // 可选：添加清理所有监听器的方法，避免内存泄漏
  cleanupAllListeners() {
    this.activeListeners.forEach((handler) => {
      EventBus.$off('queue-action', handler);
    });
    this.activeListeners.clear();
  }
}

使用示例：

const queueManager = new QueueEvents();
queueManager.listenForComplete()
  .then(item => console.log('Queue item completed:', item))
  .catch(err => console.error('Error:', err));

// 触发完成事件
queueManager.emitAction('completed', { id: 1, content: 'test task' });

关键注意事项 #

• 务必确保返回Promise的函数直接返回Promise实例，不要在回调内部创建Promise却不向外返回。
• 事件监听器使用后要及时移除，避免内存泄漏和重复触发的问题。
• 如果需要支持监听多种action，可以扩展逻辑，比如给监听方法传入action参数，动态匹配事件内容。

内容的提问来源于stack exchange，提问作者Dylan