调用callExtendedPromise时如何获取带on属性的Promise实例？

我明白你的困扰——你希望getExtendedPromise()返回一个带有自定义on方法的Promise实例，但用Promise.resolve()包装后，调用者拿到的不是这个实例本身，而是它最终resolve的值。这是Promise.resolve()的特殊行为导致的，我们来一步步搞定它：

问题根源 #

当你把一个Promise实例传给Promise.resolve()时，它不会直接返回这个实例，而是会自动「解包」这个Promise：等待它完成，然后将它的最终resolve值作为自己的结果返回。所以你原本带on属性的Promise实例被展开了，调用者自然拿不到它。

解决方案 #

根据你的场景，有两种可行的处理方式：

1. 直接返回扩展后的Promise实例 #

如果getExtendedPromise()内部不需要额外的异步逻辑，直接创建并返回带on属性的Promise即可，完全不需要用Promise.resolve()包装：

function getExtendedPromise() {
  // 创建基础Promise实例
  const customPromise = new Promise((resolve) => {
    resolve('期望的结果值');
  });
  
  // 添加自定义on方法
  customPromise.on = function(event, handler) {
    console.log(`绑定${event}事件的处理器`);
    // 这里可以添加你的事件逻辑，比如存储处理器
    return this; // 支持链式调用
  };
  
  // 直接返回这个扩展后的实例
  return customPromise;
}

async function callExtendedPromise() {
  const promiseInstance = await getExtendedPromise();
  // 现在可以正常访问on方法了
  promiseInstance.on('data', (data) => {
    console.log('收到数据:', data);
  });
}

2. 若需异步逻辑，将扩展Promise作为resolve的值返回 #

如果getExtendedPromise()内部有异步操作（比如接口请求、定时器），不要让外层Promise解包扩展后的实例，而是直接把它作为resolve的值返回：

function getExtendedPromise() {
  return new Promise((resolve) => {
    // 模拟异步操作，比如接口请求
    setTimeout(() => {
      const customPromise = new Promise((res) => res('异步获取的结果'));
      customPromise.on = (event, handler) => {
        console.log(`注册${event}事件处理器`);
        return customPromise;
      };
      
      // 直接resolve这个扩展后的Promise实例，而非让外层Promise展开它
      resolve(customPromise);
    }, 1000);
  });
}

async function callExtendedPromise() {
  const promiseInstance = await getExtendedPromise();
  // 成功访问on属性
  promiseInstance.on('complete', () => {
    console.log('操作完成');
  });
}

验证效果 #

调用callExtendedPromise()后，你会发现promiseInstance就是你在getExtendedPromise()内部创建的带on属性的Promise实例，不再是被解包后的结果值，自然可以正常访问自定义的on方法了。

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