웹 시스템 개발 #Asynchronous Programming 중급편(2)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

 

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

이번편은 JavaScript:Asynchronous Programming  1편에 이은 2편입니다.

 

이전 1편을 읽고오시는 것을 추천드립니다.

웹 시스템 개발 #Asynchronous Programming 중급편(1)

 

이번 포스팅에서는 async function과 await에 대한 설명을 해보고자 합니다.

---

async function란?

async 함수는 비동기적인 작업을 수행하는 JavaScript 함수입니다.

 

다음은 async 함수에 대한 설명입니다.

• async 함수는 ECMA2017에서 추가되었습니다.
• async 함수는 비동기 함수를 정의하며, 결과로 AsyncFunction 객체를 반환합니다.
• 내부적으로 암시적인 Promise를 사용하여 작동합니다.

async function fetchData() {
  // 비동기 작업을 수행하는 코드
  const result = await fetch('https://api.example.com/data');
  const data = await result.json();
  return data;
}

---

await이란?

await는 async 함수 내에서 사용되며, 해당 함수 내에서 비동기 작업이 완료될 때까지 대기하게 만드는 키워드입니다.

 

다음은 await에 대한 설명입니다. 

• await 뒤에는 Promise를 반환하는 비동기 함수나 표현식이 옵니다.
• await 키워드를 사용하면 코드 실행이 비동기적으로 진행됩니다. 따라서 다른 작업을 동시에 수행할 수 있습니다.
• await는 기다리는 동안 다른 코드나 이벤트 루프를 차단하지 않으므로, 비동기 코드를 동기적으로 작성하는 데 도움이 됩니다.
• await 키워드는 반드시 async function 내에서만 사용할 수 있습니다.
  • async function 바깥에서 사용하면 SyntaxError가 발생합니다.
• async function 내에서 또 다른 일반 함수가 있는 경우 그 내부에서 await을 사용해서는 안됩니다.

async function fetchData() {
  const response = await fetch('https://api.example.com/data'); // 비동기 요청
  const data = await response.json(); // JSON 파싱 (또 다른 비동기 작업)
  return data; // 결과 반환
}

 

---

Promise 객체를 사용한 순차적 및 병렬 비동기 수행 방법

비동기적인 Promise 객체를 사용하여 순차적 및 병렬 비동기 작업을 수행하는 방법도 가능합니다.

let resolveAfter2Seconds = function() {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(20);
      console.log("slow promise is done");
    }, 2000);
  });
};

let resolveAfter1Second = function() {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fast promise is done");
    }, 1000);
  });
};

let sequentialStart = async function() {
  const slow = await resolveAfter2Seconds();
  console.log(slow);
  const fast = await resolveAfter1Second();
  console.log(fast);
};

let concurrentStart = async function() {
  const slow = resolveAfter2Seconds(); // 타이머가 즉시 시작됨
  const fast = resolveAfter1Second();
  console.log(await slow); // slow가 완료될 때까지 기다림
  console.log(await fast); // fast는 이미 완료되었지만 slow와 함께 출력됨
};

sequentialStart();
concurrentStart();

1. resolveAfter2Seconds 및 resolveAfter1Second 함수
   • 이 두 함수는 각각 2초와 1초 후에 Promise를 해결(resolve)하는 비동기 작업을 생성합니다.
   • setTimeout을 사용하여 작업이 비동기적으로 실행됩니다.
2. sequentialStart 함수
   • 이 함수는 async 키워드로 선언되어 비동기적으로 실행됩니다.
   • 먼저 resolveAfter2Seconds 함수를 호출하고 해당 Promise가 완료될 때까지 기다린 후 그 결과를 slow 변수에 저장합니다.
   • 그 다음, resolveAfter1Second 함수를 호출하고 해당 Promise가 완료될 때까지 기다린 후 결과를 fast 변수에 저장합니다.
3. concurrentStart 함수
   • 이 함수도 async로 선언되어 비동기적으로 실행됩니다.
   • resolveAfter2Seconds와 resolveAfter1Second 함수를 동시에 호출합니다. 이때 await 키워드 없이 호출하므로 작업은 동시에 시작됩니다.
   • 그러나 await slow와 await fast가 있는 부분에서는 각 Promise가 완료될 때까지 기다립니다.
   • 이 부분에서는 병렬 실행이 아니라 순차적으로 기다리는 동작을 수행합니다.

 

코드의 결과는 다음과 같습니다

• sequentialStart 함수는 resolveAfter2Seconds가 먼저 완료되고 그 결과를 출력한 후, resolveAfter1Second가 완료되고 그 결과를 출력합니다. 즉, 작업이 순차적으로 실행됩니다.
• concurrentStart 함수는 resolveAfter2Seconds와 resolveAfter1Second 함수를 동시에 시작하지만, 결과를 출력하는 부분에서 순차적으로 실행됩니다. 따라서 resolveAfter2Seconds의 결과가 먼저 출력되고, 그 후에 resolveAfter1Second의 결과가 출력됩니다.