javascript - 如何正确使用javascript promises？ ( ionic 和 Cordova 相关)

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

但不幸的是，结果是在 promise 上的，因此要检索值，我必须将结果设置在 promise 上。我怎样才能做到这一点？我想我可以用链式 promise 来做到这一点，但看起来我确实做错了:

  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 将返回所有 promise 的数组。然后你可以用一个空格加入它们，或者按照你喜欢的方式排列它们。