자바스크립트 비동기 함수의 동기적 실행

10 Sep 2023

javascript

자바스크립트는 단일 스레드 기반의 언어로, 한 번에 하나의 작업만을 처리할 수 있습니다. 그렇지만 비동기 함수를 사용하여 여러 작업을 동시에 처리할 수 있습니다. 비동기 함수는 일반적으로 콜백 함수를 사용하여 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행합니다.

하지만 때로는 비동기 함수를 동기적으로 실행해야 하는 경우가 있습니다. 이러한 경우에는 async/await라는 자바스크립트의 새로운 문법을 사용할 수 있습니다. async/await를 사용하면 비동기 함수를 동기적으로 실행할 수 있으며, 코드의 가독성을 향상시킬 수 있습니다.

`async/await`의 동기적 실행 예시

다음은 async/await를 사용하여 비동기 함수를 동기적으로 실행하는 예시입니다. 이 예시에서는 fetch() 함수를 사용하여 웹 API에서 데이터를 가져옵니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData();
console.log('After fetchData');

위의 예시 코드에서 fetchData() 함수는 async로 선언되었습니다. 이 함수 내부에서는 await 키워드를 사용하여 비동기 함수인 fetch()와 response.json()을 호출하고 있습니다. await 키워드는 해당 비동기 작업이 완료될 때까지 함수의 실행을 일시 정지시킵니다.

fetchData() 함수를 호출하면 다음과 같은 순서로 코드가 실행됩니다.

fetchData() 함수가 호출되고, fetch() 함수가 비동기적으로 실행됩니다.
fetch() 함수가 데이터를 가져오기 위해 웹 API를 호출하고, 데이터가 로드되기 전까지 fetchData() 함수의 실행이 일시 정지됩니다.
데이터가 로드되면 response 객체가 반환되고, response.json()이 실행됩니다. 마찬가지로 response.json()은 데이터를 로드하기 전까지 일시 정지됩니다.
데이터가 로드되고, JSON 형식으로 변환된 후 data 변수에 할당됩니다. 이후 console.log(data)가 실행되어 데이터를 콘솔에 출력합니다.
예외가 발생하지 않으면 console.log('After fetchData')가 실행됩니다.

위의 예시를 실행하면 데이터가 가져온 후에 console.log('After fetchData')가 출력됩니다. 이는 fetchData() 함수가 비동기적으로 실행되어 데이터 로딩이 완료될 때까지 기다리기 때문입니다.

async/await를 사용하면 비동기 함수를 동기적으로 실행하고, 비동기 작업이 완료되기를 기다리는 동안 다른 작업을 실행하는 것이 가능해집니다. 이를 통해 동기적인 코드 흐름을 유지하며 비동기 작업을 처리할 수 있습니다.

결론

async/await 문법을 사용하면 자바스크립트의 비동기 함수를 동기식 방식으로 실행할 수 있습니다. await 키워드를 사용하여 비동기 작업이 완료될 때까지 함수의 실행을 일시 정지시킬 수 있습니다. 이를 통해 코드의 가독성을 향상시키고, 비동기 작업을 보다 쉽게 다룰 수 있습니다.

async/await의 동기적 실행 예시

결론

`async/await`의 동기적 실행 예시