Ionic 3 在构造函数中创建 promise 函数答案

【问题标题】：Ionic 3 make promise funtion in constructorIonic 3 在构造函数中创建 promise 函数
【发布时间】：2017-11-17 07:38:32
【问题描述】：

我们如何在构造函数中创建一个promise函数，逐行运行并等待它的结果然后转到下一行。目前我的 promise 函数没有运行，它在最后运行。

constructor(){
    console.log("Start");
    this.getData();
    console.log("End");
}

getData() {
   return new Promise(data => {
     this.db.database.ref().child('/category').orderByChild('parent_id').
       equalTo(this.idn).once('value').then(function (snapshot) {
         console.log("Mid")
       })
   });
}

上面的输出是

Start
End
Mid

预期输出是

Start
Mid
End

【问题讨论】：

标签： angular firebase firebase-realtime-database ionic3 angularfire2

【解决方案1】：

澄清一下，你的 promise 函数不会最后运行。正如预期的那样，它在“开始”之后和“结束”之前开始。它恰好最后完成。这是因为它是设计上的“异步”调用。（异步 == 非阻塞意味着程序不等待它完成。它只是继续下一条语句，在您的示例中，console.log("End")。）

顺便说一句，在 Ctor 中调用诸如“getData()”之类的方法并不是一个好习惯。您可能希望在 ngOnInit() 这样的 Angular 生命周期方法中执行此操作。

【讨论】：

程序有什么方法可以等待它先完成吗？
正如其他答案所暗示的那样，这就是“.then()”方法的用途。在您的示例中，在获取数据之后应该发生的任何事情都应该使用 .then() 方法完成。
实际上我的主要问题是在then() 方法中我无法分配像this.key=2; 这样的值，它给了我错误，这就是我发布这个以便程序等待的原因。
您遇到了什么样的错误？您可能无法访问这些嵌套处理程序中的“this”。您可能必须将“this”保存到变量中，以便可以在这些方法中调用它。或者，还有其他方法。例如，定义一个成员方法，在其中执行“this.key=2”，并在“then()”中调用此方法等。不记得我通常做什么，但尝试这些方法，看看它们是否有效。

【解决方案2】：

由于getData函数返回一个promise，解决它并将控制台放入其中

constructor(){
    console.log("Start");
    this.getData().then(function (snapshot) {             
        console.log("End");
    })
}

【讨论】：

【解决方案3】：

在构造函数中调用 getData() 方法不是一个好的做法，并且会损害应用程序的性能。我建议使用ionViewDidLoad 代替离子，这几乎是所有情况下都需要的。

ionViewDidLoad(){
    console.log("Start");
    this.getData();
}

getData() {
   return new Promise(data => {
     this.db.database.ref().child('/category').orderByChild('parent_id').
       equalTo(this.idn).once('value').then(function (snapshot) {
         console.log("Mid"),
         //put the code you want to execute after Mid here
         console.log("End");

       })
   });
}

【讨论】：