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>

안타깝게도 이 코드는 다음 오류 메시지와 함께 실패합니다.

클래스 생성자가 비동기 메서드가 아닐 수 있습니다

그 이유는 다음과 같습니다. 기본: 생성자 함수는 객체 인스턴스를 초기화하고 반환하는 일을 담당합니다. 그러나 async 키워드는 함수를 약속 생성기로 변환하여 결과적으로 함수가 객체 자체 대신 약속을 반환하게 됩니다. 이는 본질적인 갈등을 야기합니다.

불가능의 폭로

오해는 async/await와 promise 간의 유사성 인식에서 비롯됩니다. async/await는 promise 작업을 위한 구문적 설탕을 제공하지만 기본 동작을 변경하지는 않습니다. Promise는 값 생성을 확인하거나 거부하는 비동기 작업을 나타냅니다.

반대로 생성자 함수는 생성 중인 객체를 반환해야 합니다. 이 불변 요구 사항은 비동기 함수의 약속 생성 동작과 조화될 수 없습니다.

해결 방법

이 제한 사항을 극복하려면 다음 디자인 패턴 중 하나를 사용하는 것이 좋습니다. :

1. 초기화 기능 (init()): 비동기 작업을 수행하기 위한 초기화 함수를 도입합니다. 객체 인스턴스는 이 함수 내에서만 사용할 수 있습니다.

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();
}

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

정적 함수 고려 사항

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

위 내용은 JavaScript 생성자에서 Async/Await를 사용할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!