不使用.then的课堂承诺

时间:2018-09-23 02:18:12

标签: javascript es6-promise es6-class

这是一个更大问题的一部分,但是当方法调用需要promise才能解析以获取数据时,该如何在类上链接方法调用。

以下内容将不起作用,因为每次分配this.promise时,函数已经返回this

class Test {
  constructor(promise) {
    this.promise = promise;
  }

  add(x) {
    this.promise.then(y => {
      this.promise = new Promise(resolve => {
        resolve(x + y);
      });
    });
    return this;
  }

  multiply(x) {
    this.promise.then(y => {
      this.promise = new Promise(resolve => {
        resolve(x * y);
      });
    });
    return this;
  }

  answer() {
    this.promise.then(x => {
      console.log(x);
    });
  }
}

function getNumber(num) {
 const promise = new Promise(resolve => {
   resolve(num);
 });
 return new Test(promise);
}

const num = getNumber(30);
num.add(20).multiply(2).answer();  // Outputs 33 instead of 100: (30 + 20) * 2

2 个答案:

答案 0 :(得分:1)

您可以在方法中将then(这是另一个承诺)的结果重新分配给this.promise。这将确保this.promise始终是链中的最新承诺。

class Test {
    constructor(promise) {
      this.promise = promise;
    }
  
    add(x) {
      const promise = this.promise.then(num => num + x)
      return new Test(promise);
    }
  
    multiply(x) {
      const promise = this.promise.then(num =>  x * num)
      return new Test(promise);
    }
  
    answer() {
      this.promise.then(console.log)
    }
  }
  
  function getNumber(num) {
   const promise = new Promise(resolve => {
     resolve(num);
   });
   return new Test(promise);
  }
  
  const num = getNumber(30);
  num.add(20).multiply(2).answer();  // Outputs 100: (30 + 20) * 2
  num.add(5).multiply(3).answer();  // Outputs 105: (30 + 5) * 3
  

答案 1 :(得分:0)

我会避免重新分配this.promise。我不会让你成为班上的一员。您应该只让您的方法返回承诺。

如果要避免使用.then,请考虑使用async / await