JavaScript 생성자에서 Async/Await를 사용할 수 없는 이유는 무엇입니까?

생성자 내 비동기 호출: 불가능한 노력

async/await를 사용한 비동기 프로그래밍이 보편화되었지만 생성자 함수 내에서 이를 적용하면 흥미로운 도전. 다음 코드 조각을 고려하십시오.

customElements.define('e-mail', class extends HTMLElement {
  async constructor() {
    super()

    let uid = this.getAttribute('data-uid')
    let message = await grabUID(uid)

    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <div>
<p>안타깝게도 이 코드는 다음 오류 메시지와 함께 실패합니다.</p>
<blockquote>클래스 생성자가 비동기 메서드가 아닐 수 있습니다</blockquote>
<p>그 이유는 다음과 같습니다. 기본: 생성자 함수는 객체 인스턴스를 초기화하고 반환하는 일을 담당합니다. 그러나 async 키워드는 함수를 약속 생성기로 변환하여 결과적으로 함수가 객체 자체 대신 약속을 반환하게 됩니다. 이는 본질적인 갈등을 야기합니다.</p>
<p><strong>불가능의 폭로</strong></p>
<p>오해는 async/await와 promise 간의 유사성 인식에서 비롯됩니다. async/await는 promise 작업을 위한 구문적 설탕을 제공하지만 기본 동작을 변경하지는 않습니다. Promise는 값 생성을 확인하거나 거부하는 비동기 작업을 나타냅니다.</p>
<p>반대로 생성자 함수는 생성 중인 객체를 반환해야 합니다. 이 불변 요구 사항은 비동기 함수의 약속 생성 동작과 조화될 수 없습니다.</p>
<p><strong>해결 방법</strong></p>
<p>이 제한 사항을 극복하려면 다음 디자인 패턴 중 하나를 사용하는 것이 좋습니다. :</p>
<ol><li>
<strong>초기화 기능 (init())</strong>: 비동기 작업을 수행하기 위한 초기화 함수를 도입합니다. 객체 인스턴스는 이 함수 내에서만 사용할 수 있습니다.</li></ol>
<pre class="brush:php;toolbar:false">var myObj = new myClass();
myObj.init(function() {
    // inside here you can use myObj
});

2. 빌더 패턴: 생성자를 직접 호출하는 대신 빌더 함수를 사용하여 객체를 생성합니다. 사례. 빌더 함수는 모든 비동기 작업이 완료되면 객체 인스턴스로 확인되는 프라미스를 반환합니다.

myClass.build().then(function(myObj) {
    // myObj is returned by the promise, not by the constructor or builder
});

// with async/await:
async function foo () {
    var myObj = await myClass.build();
}

위의 예에서는 빌더 패턴에서 프라미스를 사용하지만 콜백도 사용할 수 있습니다.

정적 함수 고려 사항

이것은 중요합니다. 정적 함수 내의 키워드는 인스턴스화된 객체를 참조하지 않고 클래스 자체를 참조합니다. 따라서 정적 함수 내에서 직접 메서드를 호출할 수 없습니다. 대신 클래스 이름을 사용하여 메소드를 참조하거나 정적 메소드로 선언하세요.