如何嵌套2个promises并让ionViewCanLeave等待结果?

时间:2017-10-16 14:20:37

标签: javascript angular ionic-framework ionic2 promise

我有一个Ionic 2应用程序,它使用ionViewCanLeave() navGuard显示确认消息。这很好用;用户会看到一个确认对话框,如果需要,可以选择不离开。这是代码:

  // About to leave
  ionViewCanLeave() { 
    if(!this.allowedToLeave) {
      return new Promise((resolve, reject) => {
        let confirm = this.alertCtrl.create({
          title: 'Are you sure?',
          message: 'Are you sure?',
          buttons: [{
            text: 'OK',
            handler: () => {
              this.allowedToLeave = true;
              resolve();
            },
          }, {
            text: 'Cancel',
            handler: () => {
              reject();
            }
          }],
        });
        confirm.present(); 
      });
    }
  }

我现在需要从storage检查其他变量。为了得到那个变量,我需要一个承诺。我的代码如下:

  // About to leave
  ionViewCanLeave() {
    this.storage.get('safe_to_leave').then((val) => {
      this.safeToLeave = val;

      if(!this.allowedToLeave && !this.safeToLeave) {
        return new Promise((resolve, reject) => {
          let confirm = this.alertCtrl.create({
            title: 'Are you sure?',
            message: 'Are you sure?',
            buttons: [{
              text: 'OK',
              handler: () => {
                this.allowedToLeave = true;
                resolve();
              },
            }, {
              text: 'Cancel',
              handler: () => {
                reject();
              }
            }],
          });
          confirm.present(); 
        });
      }
    });
  }

这里发生的是,页面从导航堆栈中弹出,然后显示确认对话框。看起来ionViewCanLeave()没有等待存储调用运行,因为它是异步的。

我怎样才能解决这个问题?

2 个答案:

答案 0 :(得分:3)

你需要回复承诺:

return this.storage.get( /* ...etc
^^^^^^                             */

答案 1 :(得分:0)

请使用Promise.all()方法查看排队承诺。

link

的更多信息
let promises = [];

promises.push(asynchroniousFunction);
promises.push(AnotherAsynchroniousFunction);

Promise.all(promises).then((results) => {
  console.log('Data from first method', results[0]);
  console.log('Data from second method', results[1]);
}).catch((error) => {
  console.log('Error from first method', error[0]);
  console.log('Error from second method', error[1]);
});