如何正确使用javascript承诺？ （离子和科尔多瓦相关）

Question

所以我有以下Login.ts

export class LoginPage {
  public version:string;
  constructor(public navCtrl: NavController, public navParams: NavParams, private appVersion: AppVersion) {
    this.appVersion.getVersionNumber().then((val) => {
      this.version = val;
    }).catch((val) => {
      console.log(val);
    });
  }
}

我的html是Login.html我有类似的东西：

<p>{{version}}</p>

我想在html上呈现以下结果：

<p>appVersion.getAppName() appVersion.getPackageName() appVersion.getVersionCode() appVersion.getVersionNumer()</p>

所以它看起来像这样（不太确定输出格式，但我会说是这样的）：

<p>MyApp 1.0 1.0.1 1.0.1 100</p>

如果这是同步调用，例如：

，这将非常容易

  constructor(public navCtrl: NavController, public navParams: NavParams, private appVersion: AppVersion) {
    this.version = appVersion.getAppName();
    this.version += " " + appVersion.getPackageName();
    this.version += " " + appVersion.getVersionCode();
    this.version += " " + appVersion.getVersionNumer();
  }

但不幸的是，结果是在承诺上，所以要检索我必须在承诺上设置结果的值。我怎样才能做到这一点？我想我可以用链式承诺做到这一点，但看起来我做错了：

  constructor(public navCtrl: NavController, public navParams: NavParams, private appVersion: AppVersion) {
    this.appVersion.getAppName().then((val) => {
      this.version = val;
      this.appVersion.getPackageName().then((val) => {
        this.version += " " + val;
        this.appVersion.getVersionCode().then((val) => {
          this.version += " " + val;
          this.appVersion.getVersionNumber().then((val) => {
            this.version += " " + val;
          });
        });
      });
    }).catch((val) => {
      console.log(val);
    });
 }

正确的方法是什么？

Answer 1

有多种方法可以做到这一点。这取决于您是否希望同时获得所有结果。要同时获得所有结果，您可以做的一件事是使用Promise.all。

constructor(public navCtrl: NavController, public navParams: NavParams, private appVersion: AppVersion) {
  Promise.all([
    this.appVersion.getAppName(),
    this.appVersion.getPackageName(),
    this.appVersion.getVersionCode(),
    this.appVersion.getVersionNumber(),
  ]).then((results) => {
    this.version = results.join(' ');
  }).catch((err) => {
    console.log(err);
  });
}

Promise.all将返回所有承诺的数组。然后，您可以使用空格加入它们，或者根据需要进行排列。