承诺结果后更新 html 的最佳方式

Question

我想知道绑定承诺结果的最佳方法，即使用 angular 2 注入到 html 标签(我使用 ionic 2(...如您所知，异步编码的主要问题是丢失对当前对象的引用。似乎我应该将当前对象作为 prameter 传递给 Promise 函数生成器。我在网上搜索了更好的解决方案，但没有找到！那么还有比这更好的办法吗？

Ionic 2 本身使用观察和订阅来执行异步过程。但主要问题是，对于不可观察的现有函数，它无法工作！

我的申请：

注射类：

export class PromiseComponent {
    doPromise = function (obj: any) {
        return new Promise(function (resolve2) {
            setTimeout(function () {
                resolve2({ num: 3113, obj: obj });
            }, 5000);
        });
    }
}

点击呼叫：

  promiseVal = 0
  doMyPromise() {
    this.myPromise.doPromise(this).then(this.secondFunc);//UPDATED HERE
  }

//UPDATED HERE
  secondFunc = function (res) {
    this.promiseVal = res.num
  }

目录：

 <div>{{promiseVal}} </div>
 <button (click)="doMyPromise()">Do Promise</button>

Answer 1

如果你想在组件中使用一个承诺：

promiseVal = 0
doMyPromise() {
  this.myPromise.doPromise().then((res) => {
    this.promiseVal = res.num
  });
}

我不知道您的服务背后的原因，但通常是这样的(可选(：

export class PromiseComponent {
    doPromise() { //This method will return a promise
        return new Promise(function (resolve2) {
            setTimeout(function () {
                resolve2({ num: 3113, obj: obj });
            }, 5000);
        });
    }
}

OP编辑帖子后：

您可以更改此设置：

doMyPromise() {
    this.myPromise.doPromise(this).then(this.secondFunc);//UPDATED HERE
}

自

doMyPromise() {
    this.myPromise.doPromise(this).then(this.secondFunc.bind(this));//UPDATED HERE
}

Answer 2

如您所知，异步编码的主要问题是丢失对当前对象的引用

这不是真的，箭头函数不绑定自己的this因此您无需将this发送到doPromise

export class PromiseComponent {
  doPromise () {
    return new Promise(function (resolve) {
      setTimeout(function () {
        resolve({ num: 3113 })
      }, 5000)
    })
  }
}
promiseVal = 0
doMyPromise() {
  this.myPromise.doPromise()
    .then(res => {
      this.promiseVal = res.num
    })
}