Как правильно использовать обещания JavaScript? (Ионные и связанные с кордовой)

Итак, у меня есть следующее 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);
    });
 }

Как правильно это сделать?

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

Другие вопросы по тегам