为什么 Promise 会用 Promise 解决？

Question

我的代码中有一个承诺始终失败。当我向Promise#then 回调返回一个承诺时，它不会等待承诺解决，而是将其作为参数传递给后续的Promise#then 调用。

更多详细代码请参见gist 中的代码。调用 House#setEnergyData 会导致问题（请参阅 gist 中的 cmets）。

在我的代码中导致问题的基本模式如下所示（尽管此文字代码确实有效）：

class Class1 {
    step1(){
       return new Promise((fnResolve, fnReject)=>{
       // do something
       fnResolve();
     });
    }

    step2(){
       return this.step1().then(()=>{ 
         // do something else
       });
    }
 }

 class Class2 {

   constructor(){
     this.class1 = new Class1();
   }

   doSomething(){
      this.class1.step2()
        .then((res)=>{
          console.log(res) // Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
          // do something that shouldn't happen until Class1#step2 has finished.
          // error!
        });
   }
 }

这是在浏览器中运行并使用 Babel ES2015 预设编译并使用 Babel polyfill。我没有使用任何Promise npm 模块。

这在我的代码中的多个地方重复出现。我不确定这是编译过程、babel polyfill 的问题，还是我误解了 Promise。

Answer 1

尝试在.then()step2 中包含return 语句以从Promise 在step2() 调用中返回值

class Class1 {
  step1() {
    return new Promise((fnResolve, fnReject) => {
      // do something
      fnResolve(123);
    });
  }
  step2() {
    return this.step1().then((data) => {
      // do something else
      // added `return` here
      return data
    });
  }
}

class Class2 {
  constructor() {
    this.class1 = new Class1();
  }
  doSomething() {
    this.class1.step2()
      .then((res) => {
        console.log(res) // 123
      });
  }
}

var c = new Class2();
c.doSomething();