async, await

methods: {
  test1() {
    console.log('111');
  },
  test2() {
    console.log('333');
  },
  test3() {
    this.test1();
    this.test2();
    for (var i = 0; i < 5; i++) {
      // 생략
    }
  }
}

에서 this.test1() 이 완료 되고 this.test2() 가 완료 되고 for문이 실행되게 하는 방법

---

JavaScript에서는 기본적으로 비동기적으로 동작하기 때문에 this.test1()이 완료된 후에 this.test2()가 완료되도록 보장하기 어려울 수 있습니다. 하지만 아래와 같이 async와 await를 사용하면 순차적인 실행을 보장할 수 있습니다:

vue
methods: {
  async test1() {
    console.log('111');
  },
  async test2() {
    console.log('333');
  },
  async test3() {
    await this.test1();
    await this.test2();

    for (var i = 0; i < 5; i++) {
      // ... 생략
    }
  }
}

위 코드에서 async 키워드를 사용하여 비동기 함수를 선언하고, await 키워드를 사용하여 해당 함수의 완료를 기다립니다. test3() 함수 내에서 await this.test1();이 완료되어야만 await this.test2();가 실행되고, 이후에 for문이 실행됩니다.

단, 이러한 방식은 async와 await를 지원하는 브라우저와 환경에서만 작동합니다. 만약 지원하지 않는 환경이라면 프로미스와 콜백을 활용해 순차적 실행을 구현해야 합니다.

질문 : 위 소스를 프로미스와 콜백으로 바꾸면?

아래는 해당 소스 코드를 프로미스와 콜백 함수를 활용하여 수정한 예시입니다:

1. 프로미스 사용:

   vue
   methods: {
     test1() {
       return new Promise(resolve => {
         console.log('111');
         resolve();
       });
     },
     test2() {
       return new Promise(resolve => {
         console.log('333');
         resolve();
       });
     },
     async test3() {
       await this.test1();
       await this.test2();
   
       for (var i = 0; i < 5; i++) {
         // ... 생략
       }
     }
   }
   

2. 콜백 함수 사용:

   vue
   methods: {
     test1(callback) {
       console.log('111');
       callback();
     },
     test2(callback) {
       console.log('333');
       callback();
     },
     test3() {
       this.test1(() => {
         this.test2(() => {
           for (var i = 0; i < 5; i++) {
             // ... 생략
           }
         });
       });
     }
   }
   

위의 코드들은 모두 test1() 함수가 완료된 후에 test2() 함수가 실행되도록 하기 위한 방법을 보여주고 있습니다. 선택한 방식에 따라 코드를 사용하시면 됩니다.