Angular + Firebase 调用服务内方法后 .then() 不触发问题

问题原因 #

你手动封装的自定义Promise没有在异步操作成功时调用resolve()，导致返回给组件的Promise一直处于pending状态，自然永远不会触发外层的.then()回调。

你使用的Firebase数据库的update()方法本身就会返回一个标准Promise，你在外面额外套了一层自定义Promise，但没有处理成功态的透传：

• 第一个版本的代码中，你调用完update()后没有任何后续处理，自定义Promise的resolve从来没被执行，Promise永远不会变成成功状态。
• 第二个测试版本中，内部的.then()能打印日志，是因为这个回调绑定的是Firebase原生update()返回的Promise的成功事件，但你外层自定义的Promise依然没有调用resolve()，所以返回给组件的Promise还是pending状态，外层的.then()还是不会触发。

修复方案 #

有两种可行的写法，推荐第二种更简洁：

方案1：补全自定义Promise的resolve调用 #

updateQuestion(question: Question){
  return new Promise<any>((resolve, reject) =>{
    this.db.database.ref(`questions/${question.key}`)
        .update(question)
        .then(res => {
          console.log('question was updated');
          resolve(res); // 触发自定义Promise的成功状态，外层then才会执行
        }, err => {
          reject(err);
        });
  });
}

方案2：直接返回Firebase原生Promise（无需额外封装） #

因为update()本身已经返回Promise，没必要多套一层自定义Promise，代码更简洁无冗余：

updateQuestion(question: Question): Promise<any> {
  return this.db.database.ref(`questions/${question.key}`).update(question);
}

两种方案修改后，组件中调用的.then()和.catch()都可以正常触发。

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