[간단정리js] aysnc / await

async / await | 비동기 코드를 동기적인 방식으로 실행하도록 돕는 키워드

await 키워드는 비동기 함수에서 약속(promise)이 해결(이행)될 때까지 기다렸다(await)가 값을 반환(return)하는 데 사용됩니다.  즉. Promise가 이행 상태가 될 때 까지 비동기 코드의 수행을 잠시 동안 중단할 때 사용하며, 이 때 비동기 함수의 시작임을 나타내는 aysnc 키워드가 함께 사용됩니다. (하나라도 빠지면 안 됨)

 

<예시1>

async function fetchData() {
  const response = await fetch("https://api.example.com/data"); //주소로 보낸 응답올 때 까지 대기
  const data = await response.json(); //받은 제이슨데이터를 js 객체로 모두 파싱할 때 까지 대기
  return data; //모두 이행된 데이터를 반환
}

위 예에서 fetchData 함수는 await를 사용하여 fetch 작업의 결과를 기다린 다음 응답이 JSON으로 구문 분석될 때까지 기다립니다. await 키워드를 사용하면 콜백이나 체인 없이 동기 코드처럼 보이는 비동기 코드를 쉽게 작성할 수 있습니다. 즉, than 체이닝으로 발생할 수 있는 콜백 지옥을 해결할 수 있습니다.

 

 

<예시2>

// A simple example of an asynchronous function
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function example() {
  console.log("Starting");
  await delay(3000); //3초가 지날 때 까지 대기한다. 
  console.log("Finished");
}

example();
// await 키워드가 붙은 코드가 완료되고 나서 마지막 코드가 실행되었다.
// Outputs: "Starting" after 1 second
//          "Finished" after 3 seconds

// 만약에 await 키워드가 없다면, 다음과 같이 지연시간 없이 즉시 실행된다 
// Outputs: "Starting" after 1 second
//          "Finished" after 2 seconds

 

이 예에서 지연 함수는 지정된 시간(밀리초) 후 해결되는 약속(Promise)을 반환( return)합니다. 예제 함수는 await 키워드를 사용하여 "Finished"를 기록하기 전에 지연으로 반환된 약속이 해결될 때까지 기다립니다.

 

정리하자면...

async ~ await 키워드를 적용하는 경우 ,비동기 함수 호출 시 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있습니다. 비동기 기능은 콜백과 체인을 사용하는 대신 위에서 아래로 읽는 코드를 더 쉽게 작성하고 비동기 작업이 완료될 때까지 기다립니다.