记一次失败的StackOverflow回答

有一位同学在StackOverflow上提问，他想创建一个 Future 类，异步的实现 Future 的构造，当构造完成之后自动调用 .then 方法，执行后面的逻辑

class Features {

  features = null

  constructor(){

    fetchFeatures()

  }

  async fetchFeatures() {

    this.features = await fetch('https://api.github.com/'))

  }

}

const featuresInstance = new Features();

featuresInstance.then((res) => console.log(featuresInstance.features));

我第一眼想到的是继承 Promise 但是继承 Promise 是行不通的，具体请看这里

简单来说就是 Promise 的运行需要运行时提供魔法，不能简单的通过 super 构造函数传参来执行，另外即便可以传参，也无法使用this，起不到题主要求的封装的效果

首先说明题主的需求是一个伪需求，异步加载资源可以通过Promise来实现，没必要封装到构造函数里

下面给出题主要求的伪需求的实现方式

class Features {

  features = null

  #prom = null

  constructor(){

    return Object.assign(this,this.#prom = new Promise(this.fetchFeatures.bind(this)))

  }

  then(callback) {

    return this.#prom.then(callback)

  }

  async fetchFeatures(resolve) {

    resolve(this.features = await fetch('https://api.github.com/'))

  }

}

const featuresInstance = new Features();

featuresInstance.then((res) => console.log(featuresInstance));

运行结果为

可以说是非常完美的实现了需求，但是为什么说是一次失败的尝试呢？

因为题主把问题删了！！

可能是因为被人点了踩，或者是自己意识到这是反模式吧，总之我在解决这个问题的过程中获得了成长（this指向，bind函数细节，super用法，复习异步代码，混入mixin，私有字段）

今天就到这里吧，撒由那拉~~

巴特西

记一次失败的StackOverflow回答

最新文章

热门文章