如何在ionic 4中使用alertcontroller返回承诺?

时间:2019-06-17 19:32:14

标签: javascript typescript ionic-framework promise ionic4

我正在尝试将ionic 3代码转换为ionic 4,但我不知道promise在ionic 4上的工作方式。我尝试查看文档,但找不到任何针对Promise的解决方案

async generateAlert(header, message, ok, notOk): Promise<boolean> {
    return new Promise((resolve, reject) => {
        let alert = await this.alertController.create({
            header: header,
            message: message,
            buttons: [
                {
                    text: notOk,
                    handler: _=> reject(false)
                },
                {
                    text: ok,
                    handler: _=> resolve(true)
                }
            ]
        })
        await alert.present();
    });
}

1 个答案:

答案 0 :(得分:1)

您会看到 here

  

await运算符用于等待以进行承诺。

因此await只是使用诺言的另一种方式,如下面的示例所示:

// Method that returns a promise
private resolveAfter2Seconds(x: number): Promise<number> { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

// Using await
private async f1(): Promise<void> {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

// Not using await
private f2(): void {
  resolveAfter2Seconds(10).then(x => {
    console.log(x); // 10
  });
}

f1(){...}中,您可以看到应用程序在执行下一行代码之前将如何等待诺言得到解决。这就是为什么您可以做

之类的原因
var x = await resolveAfter2Seconds(10);
console.log(x); // 10

不将console.log(x)放在.then(() => {...})块中。

f2()中,由于我们不使用await,因此应用程序在执行下一行代码之前不会等待承诺被解决,因此我们必须使用then在控制台中打印结果:

resolveAfter2Seconds(10).then(x => {
  console.log(x); // 10
});

话虽如此,如果您只想创建一种显示警报并在用户选择ok / notOk按钮时返回true / false的方法,则可以执行以下操作(完全不使用await

private generateAlert(header: string, message: string, ok: string, notOk: string): Promise<boolean> {
  return new Promise((resolve, reject) => {
    // alertController.create(...) returns a promise!
    this.alertController
      .create({
        header: header,
        message: message,
        buttons: [
          {
            text: notOk,
            handler: () => reject(false);
          },
          {
            text: ok,
            handler: () => resolve(true);
          }
        ]
      })
      .then(alert => {
        // Now we just need to present the alert
        alert.present();
      });
  });
}

然后您可以使用这种方法

private doSomething(): void {

  // ...

  this.generateAlert('Hello', 'Lorem ipsum', 'Ok', 'Cancel').then(selectedOk => {
    console.log(selectedOk);
  });

}