JavaScript之异步构造方法总结【异步构造函数 - 构造函数与Promise的结合】

爱被打了一巴掌 2021-08-13 19:26 664阅读 0赞

### **JavaScript默认的构造函数只能执行同步代码, 无法执行异步代码，** ###

### **构造函数异步的实现原理参考：** ###

异步构造函数 - 构造函数与Promise的结合参考：[https://www.blackglory.me/async-constructor/][https_www.blackglory.me_async-constructor]

参考2：[https://github.com/BlackGlory/async-constructor][https_github.com_BlackGlory_async-constructor]

使用别人封装号的即可
    
    npm i async-constructor

## 异步构造基类: 更好的使用方式 ##

对于第二种异步构造函数, 我们可以把它编写成基类, 这种方式相比直接编写第二种异步构造函数要安全得多, 同时也比第一种异步构造方式看起来更接近其他编程语言的习惯(毕竟当初加入class关键字就是为了这个目的), 不需要手动编写`return this`. 除了自己编写基类, 你也可以在[async-constructor][https_github.com_BlackGlory_async-constructor]找到我已经做好的模块.

基类形式非常简单, 我们只需要在最小化形式上进行扩展即可:

class AsyncConstructor {
      constructor(asyncConstructor) {
        const init = (async () => {
          await asyncConstructor()
          delete this.then
          return this
        })()
        this.then = init.then.bind(init)
      }
    }

在使用时, 继承AsyncConstructor类, 将异步箭头函数作为基类的参数传入super:

function delay(timeout) {
      return new Promise(resolve => setTimeout(() => resolve(), timeout))
    }
    
    class MyClass extends AsyncConstructor {
      constructor(timeout) {
        super(async () => {
          await delay(timeout)
          this.completed = true
        })
    
        this.completed = false
      }
    }
    
    ;(async () => {
      const a = await new MyClass(5000)
      console.log(a.completed) // true
    })()

**之所以说这种方式让第二种异步构造函数更加安全, 是因为在这种使用方式里, 你的"init函数"内永远有await操作符, 即使你传入的是一个同步函数, 它也不会出现上面提到的问题**. 此外, 在往super里传入参数时, 我们还能额外获得来自运行时的错误检查: 在大多数情况下我们需要在异步构造函数里修改this的成员, 若你传入的是一个同步函数, 而这个同步函数里又用到了this, 运行时将直接爆出错误`ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor`, 原因是我们的基类此时还没有构造完成. 相反, 在传入async函数的情况下, 基类已经构造完成了, 使用起来就没有任何问题, 通过这种方式, 可使开发人员避免在此编写同步代码.

[https_www.blackglory.me_async-constructor]: https://www.blackglory.me/async-constructor/
[https_github.com_BlackGlory_async-constructor]: https://github.com/BlackGlory/async-constructor