离子确认警报：在继续之前等待点击警报

Posted 2023-05-06

【中文标题】离子确认警报：在继续之前等待点击警报

【英文标题】：Ionic confirmation alert: await click on alert before continuing

【发布时间】：2019-06-06 18:37:13

【问题描述】：

我有一个函数可以运行一些任意代码，称为calculate()。我有一个if 条件，如果是true，我会提出一个离子确认警报。

我可以弹出确认警报，但是，我正在尝试使用 async/await 来等待确认中的响应，但是我对 async/await 的理解一定是错误的。这基本上是我正在做的事情：

import  AlertController  from '@ionic/angular';

export class Calculator 
  private cancelResults:boolean = false;

  constructor(private alertController:AlertController) 

  async calculate() 
    // If my condition is true.
    if (true) 
      // show the user a confirm alert.
      await this.warn();

      // break out of function since they hit cancel.
      if (this.cancelResults) return;
    

    // The user hit Okay, continue with this function.
  

  async warn() 
    const alert = await this.alertController.create(
      header: 'confirm',
      message: 'my message',
      buttons: [
        
          text: 'Cancel',
          role: 'cancel',
          handler: (blah) => 
            console.log('they hit cancel');
            this.cancelResults = true;
            return new Promise(resolve => setTimeout(resolve, 2000));
          
        , 
          text: 'Okay',
          handler: () => 
            console.log('they hit ok');
            return new Promise(resolve => setTimeout(resolve, 2000));
          
        
      ]
    );

    await alert.present();
  

当确认弹出时，calculate() fn 的其余部分继续。我希望它等待确认响应。

关于如何实现这一点的任何想法？

【问题讨论】：

本教程应该可以帮助你理解 async await youtube.com/watch?v=vn3tm0quoqE

感谢@JuanLozoya，这是一个做得很好的视频并解释了很多事情

【参考方案1】：

我想通了！我需要先将 await 设置为一个常量，然后将对话框包装在一个 Promise 中，而不是为每个响应返回一个单独的 Promise。

import  AlertController  from '@ionic/angular';

export class Calculator 
  constructor(private alertController:AlertController) 

  async calculate() 
    // If my condition is true.
    if (true) 
      // show the user a confirm alert.
      const confirmation = await this.warn();
      // break out of function since they hit cancel.
      if (!confirmation) return;
    

    // The user hit Okay, continue with this function.
  

  async warn() 
    return new Promise(async (resolve) => 
      const confirm = await this.alertController.create(
        header: 'confirm',
        message: 'my message',
        buttons: [
          
            text: 'Cancel',
            role: 'cancel',
            handler: () => 
              return resolve(false);
            ,
          ,
          
            text: 'OK',
            handler: () => 
              return resolve(true);
            ,
          ,
        ],
      );

      await confirm.present();
    );
  

【讨论】：

啊哈！我以前也在做这个，但不得不跑腿。感谢您发布您的解决方案！我也赞成您提出的格式良好的问题。 :-)

有用。谢谢。

【参考方案2】：

我最近也需要弄清楚这一点。对于未来的读者，我认为返回 onDidDismiss() 承诺并检查所选按钮的角色会更简单一些。此外，您可以通过单击背景来检查“背景”角色以防他们取消。

const confirmation = await this.myAlert('Confirm', 'Message');

if (confirmation.role === 'cancel' || confirmation.role === 'backdrop') 
  // clean up code
  return;


myAlert(header: string, message: string) 
  return this.alertCtrl
    .create(
      header: header,
      message: message,
      buttons: [
        
          text: 'Cancel',
          role: 'cancel',
        ,
        
          text: 'Okay',
        ,
      ],
    )
    .then((alertEl) => 
      alertEl.present();
      return alertEl.onDidDismiss();
    );

【讨论】：

我喜欢！很好的解决方案

所以如果我理解正确，这是一个连锁承诺？警报会出现，当它被解除时，myAlert 函数会返回吗？有人知道如何将其包装在 rxjs 可观察对象中吗？