如何在 JavaScript ES6 类中链接异步方法

Question

我想从一个类中链接方法。我对同步方法有问题，但我不知道如何使用异步方法。

比如这个类：

class Example {

  constructor() {
    this.val = 0
  }

  async () {
    setTimeout(() => {
      this.val += 1
      return this
    }, 5000)
  }

  sync () {
    this.val += 1
    return this
  }

  check () {
    console.log('checker', this.val)
    return this
  }

}

这行得通：

new Example().sync().check()
> 1

但这不起作用：

new Example().async().check()
> TypeError: Cannot read property 'check' of undefined

附：我想要链接，而不是地狱回调。

Answer 1

我希望您想在超时到期后致电check()。问题是分叉了，你不能立即有东西可以归还。

您可以传入check() 作为回调：

class Example {

  constructor() {
    this.val = 0
  }

  async (callback) {
    setTimeout(() => {
      this.val += 1
      callback()
    }, 5000)
  }

  sync () {
    this.val += 1
    return this
  }

  check () {
    console.log('checker', this.val)
    return this
  }

}

// execution
var ex = new Example();
ex.async(ex.check)

...或承诺

class Example {

  constructor() {
    this.val = 0
  }

  async (callback) {
    var deferred = Q.defer()
    setTimeout(() => {
      this.val += 1
      deferred.resolve();
    }, 5000)
    return deferred.promise;
  }

  sync () {
    this.val += 1
    return this
  }

  check () {
    console.log('checker', this.val)
    return this
  }

}

// execution
var ex = new Example()
ex.async().then(() => ex.check())

...或者你可以使用 ES6 生成器

Answer 2

如果您只想让new Example().async().check() 工作，那么您只需在调用setTimeout 后return this。例如：

async () {
  setTimeout(() => {
    this.val += 1
  }, 5000)
  return this
}

超时内的return this 不是必需的，因为它会自行执行。那时它基本上是独立运行的。

真的，如果您希望整个事情完全异步运行，并且您能够控制某些事情发生时的流程，那么您需要使用 Promise 来实现这一点。

Answer 3

Promises 将最优雅地解决您要查找的问题。您可能需要安装一个 polyfill，例如 Bluebird 或 q。

我会将您的异步方法更改为：

async() {
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            this.val += 1;
            resolve(this);
        }, 5000);
    });
}

以及您的调用代码：

new Example().async().then((instance)=>instance.check());

不幸的是，在确定 ES7 异步函数之前，如果没有某种形式的回调，就没有一种优雅的方式来做到这一点。

Answer 4

如果您使用的是async 函数和方法，那么您就是在使用 Promise（我想您知道它们，如果不了解它们，请在继续阅读之前了解它们）。

如果您考虑等待它，则不应在异步函数内部使用setTimeout。相反，为超时创建一个承诺，最好使用这样的辅助函数：

function timeout(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms)
    });
}

现在您可以按照自己的意愿编写方法：

class Example {
  …
  async async () {
    await timeout(5000);
    this.val += 1;
    return this;
  }
  …
}

当然，作为async 函数，它不会返回实例本身，而是对它的承诺。如果您要链接，则必须在另一个异步函数中调用它，您可以在其中await 该承诺：

(async function() {
    (await (new Example().async())).check();
}());