Javascript 비동기, 동기 (await & async)

 

목차

1. 비동기와 동기 차이점

2. await async 사용이유

3. await async 사용예제

 

 

1. 비동기와 동기 차이점

동기 (Synchronous)

: 작업이 순차적으로 실행되어 하나의 작업이 끝날 때까지 다음 작업이 시작되지 않습니다.

 

비동기 (Asynchronous)

: 작업이 병렬로 실행될 수 있어, 긴 작업이 완료되기를 기다리지 않고 다른 작업을 수행할 수 있습니다.

 

 

 

 

---

 

 

 

2. await async 사용이유

: await와 async를 사용하는 이유는 비동기 코드를 더 간결하고 읽기 쉽게 만들기 위해서입니다.

async 키워드는 함수가 비동기 함수를 반환하도록 하고, await 키워드는 프로미스가 해결될 때까지 함수 실행을 일시 중지합니다.

이를 통해 콜백 지옥(callback hell)을 피하고, 비동기 작업을 마치 동기 코드처럼 순차적으로 작성할 수 있습니다.

 

 

 

---

 

 

 

3. await async 사용예제

: 비동기 작업을 실행하는 두개의 함수를 순차적으로 실행하는 예시입니다.

startFuncs 함수를 실행시키면 첫번재 callApiFirst 함수가 끝날때까지 callApiSecond 함수가 실행되지 않습니다.

즉, 비동기 함수를 동기적으로 실행시킬 수 있습니다.

 

async function callApiFirst(){
	// Promise를 이용하여 비동기 작업 실행
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          const success = true;
          if (success) {
            resolve("Task completed successfully");
          } else {
            reject("Task failed");
          }
        }, 1000);
}

async function callApiSecond(){
	// Promise를 이용하여 비동기 작업 실행
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          const success = true;
          if (success) {
            resolve("Task completed successfully");
          } else {
            reject("Task failed");
          }
        }, 1000);
}

async function startFuncs() {
	await callApiFirst();
	await callApiSecond();
}