承诺链接，"this"未定义

Question

在我的提供程序中，我有以下代码（简化）：

  initiateAPI(): Promise<any> {
      return this.method1()
        .then(this.method1)
        .then(this.method2)
        .catch(console.log);
  }

方法1 和方法2 方法都返回一个 Promise，如下所示：

  method1() : Promise<any> {
    console.log("this in method 1",this);
    return new Promise((resolve, reject) => {
      this.anotherProvider.getData().then((data) => {
        if(!data) {
          reject("Data not found");
        }
        resolve(data);
      });
    });
  }
 method2() : Promise<any> {
    console.log("this in method 2",this);
    return new Promise((resolve, reject) => {
      this.thirdProvider.getData().then((data) => {
        if(!data) {
          reject("Data not found");
        }
        resolve(data);
      });
    });
  }

第一个方法（方法

1）正确执行，第二个方法（方法2）按预期调用。问题是this在第二种方法中未定义。

我还尝试将承诺链接如下：

  initiateAPI(): Promise<any> {
      return this.method1()
        .then(() => this.method1)
        .then(() => this.method2)
        .catch(console.log);
  }

但问题依然存在。

如何使this保持其价值？

Answer 1

方法作为老式的function函数实现，因此不是箭头函数，这意味着this由调用方法的方式决定。当您提供函数引用作为then回调时，this将被undefined（或草率模式下的全局对象）。

至少有两种方法可以根据需要保留this：

initiateAPI(): Promise<any> {
    return this.method1()
        .then(_ => this.method1())
        .then(_ => this.method2())
        .catch(console.log);
}

或：

initiateAPI(): Promise<any> {
    return this.method1()
        .then(this.method1.bind(this))
        .then(this.method2.bind(this))
        .catch(console.log);
}