Как правильно использовать обещания 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 вернет массив всех обещаний. Затем вы можете просто присоединиться к ним с пробелом или расположить их так, как вам нравится.