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

Question

我想知道绑定承诺结果的最佳方式，即使用 angular 2 注入 html 标记（我使用 ionic 2）... 如您所知，异步编码的主要问题是失去对当前对象的引用。看来我应该将当前对象作为参数传递给 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
  }

HTML：

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

Answer 1

如果你想在你的组件中使用一个 Promise：

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