JS App에서 onReady 약속을 만들려면 어떻게 해야 합니까?

JS App에서 onReady 약속을 만들려면 어떻게 해야 합니까?

JS에서 배우고 있는 고급 토픽과 이해하려고 하는 토픽이 있습니다.

저는 VueJS 애플리케이션을 작성했습니다.Vue 자체의 외부에 있는 Vue의 데이터와 메서드를 공개해야 합니다.vuex를 사용하고 있습니다.

이는 사용자가 프런트 엔드에서 일반 JS를 사용하여 애플리케이션을 확장할 수 있도록 하기 위함입니다.

사용자가 프런트 엔드에 이런 것을 추가하는 것입니다.이와 같은 기능을 하는 JS 프레임워크/앱을 몇 개 본 적이 있습니다.

AppName.onReady.then(function(instance) { // use the instance object var email = instance.data["email"] var name = instance.data["name"] var isComplete = member.isComplete })

지금 제가 이해하려는 것은 위의 작업을 수행하기 위해 앱에 필요한 코드입니다.

코드를 통해 새로운 AppName({})에서 호출되는 Class AppName임을 알 수 있으며 해결은 되지만 실행 방법은 확실하지 않습니다.

여기 약속을 돌려주는 샘플이 있습니다.

const AppName = {
  onReady() {
    return new Promise( (resolve, reject) => {
      // do your stuff here, then call resolve().
      // sample follows
      setTimeout(()=>{resolve()}, 1000)
    })
  }
}

이렇게 불러주세요.반드시 호출해 주세요.onReady(),뿐만 아니라.onReady.

AppName.onReady().then(()=>{
  // your code here.
})

이 효과를 얻을 수 있는 방법은 다음과 같습니다.

class AppName {
  constructor(data = {
    email: null,
    name: null
  }) {
    this.data = data;
  }

  get onReady() {
    return new Promise((resolve, reject) => {
      resolve(this);
    });
  }
}

const handleOnReady = instance => {
  const {
    email,
    name
  } = instance.data;

  console.log(`${name}'s email address is: ${email}.`);
};


const tom = {
  email: 'tom@fakemail.com',
  name: 'Tom'
};

const app = new AppName(tom);

app.onReady.then(handleOnReady);

메서드를 다음과 같이 표시할 수 있습니다.async그런 다음 암묵적으로 약속을 반환합니다.

const AppName = {
  async onReady() {
      // do your stuff here, then simply return to resolve.
      // throwing a exception calls reject.
  }
}

사용방법:

AppName.onReady().then(()=>{
  // app is ready
})

클라이언트가 비동기 기능에 있는 경우, 간단하게 사용할 수 있습니다.await사용방법:

// must be inside async function
await AppName.onReady()
// app is ready

사용방법await루트 레벨에서는 즉시 실행되는 함수로 랩합니다.

(async()=>{
   await AppName.onReady()
})()

언급URL : https://stackoverflow.com/questions/59007514/how-do-i-create-an-onready-promise-in-js-app