내 블로그 페이지에 작성된 기초적인 내용이다.
Async, Await
에 대해 더 자세히 알아보면..
async는 함수를 비동기 함수로 만들어 준다.
이 함수가 호출되면 자바스크립트 엔진은 이 함수를 즉시 실행하지 않고 이 함수가 끝날 때까지 기다리지 않고 바로 다음 코드를 실행한다.
await는 비동기 함수의 실행 결과를 기다리고 그 결과를 반환한다. await 함수는 반드시 async 함수 안에서 사용되어야 한다. async 가 아닌데 await 를 사용하면 그냥 일반적인 동기 함수로 취급된다.
async 함수는 Promise 를 반환한다. 자바스크립트 엔진은 함수를 즉시 실행하고 결과로 Promise 객체(fulfilled, rejected, pending)를 반환한다. Promise 객체는 비동기 처리가 완료되면 resolve 메서드를 호출해 결과를 반환하거나 reject 메시지를 호출해 에러를 반환한다.
await 를 사용시 Promise 객체가 resolve될 때까지 기다리다가 결과를 반환한다.
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch(error) {
console.error(error);
}
}
fetchData().then(data => console.log(data));
위 코드에서는 async함수인 fetchdata가 fetch를 호출해 데이터를 가져오고 결과로 Promise 객체를 반환한다. 그리고 그 Promise 객체를 await로 기다린 후 결과를 반환한다. 만약 에러 발생시 catch 구문에서 처리한다.
await는 Promise 가 resolve될 때까지 기다린다는 점에서 비동기 처리를 더 쉽게 다룰 수 있게 해준다. 그러나 남발할 경우 코드가 복잡해지고 비동기 처리를 이해하기 어려워져 적절한 곳에서만 사용하는 것이 권장된다.
