Comment puis-je imbriquer 2 promesses et que ionViewCanLeave attende le résultat?

Question

J'ai une application Ionic 2 qui utilise le ionViewCanLeave() navGuard pour afficher un message de confirmation. Cela fonctionne bien; l'utilisateur reçoit une boîte de dialogue de confirmation et peut choisir de ne pas partir s'il le souhaite. Voici le code pour elle:

// 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(); 
     }); 
    } 
    } 

Je dois maintenant vérifier une variable supplémentaire ici de storage. Pour obtenir cette variable, j'ai besoin d'une promesse. Mon code est le suivant:

// 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(); 
     }); 
     } 
    }); 
    } 

Qu'est-ce qui se passe ici cependant, est que la page est de la pile sauté de navigation, puis la boîte de dialogue de confirmation est affichée. Il semble que ionViewCanLeave() n'attend pas l'exécution de l'appel de stockage car il est asynchrone.

Comment puis-je contourner le problème?

Answer 1

Vous devez retourner la promesse:

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

Answer 2

S'il vous plaît jeter un oeil à des promesses qui font la queue, en utilisant la méthode Promise.all().

Plus d'infos sur 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]); 
});