[JS] async와 await

async와 await

async와 await는 JavaScript에서 비동기 처리를 더 간결하고 이해하기 쉽게 작성할 수 있도록 도와주는 키워드이다. 이들은 Promise를 기반으로 하며, callback hell 문제를 해결하는 데 유용하다

async와 await는 기존의 Promise 기반 비동기 처리 방식 위에서 더 나아진 형태로 개발되었습니다. 그래서 'Promise 기반이라 함'은 async/await 구문 자체도 내부적으로 Promise를 사용하여 동작한다는 것을 의미합니다.

async는 Promise를 반환

async 키워드는 함수 앞에 사용되며, 해당 함수가 항상 Promise를 반환하도록 합니다. 만약 async 함수가 값을 반환하면, 그 값은 Promise로 감싸져서 반환됩니다.

async function ex() {
  return 1;
}

ex().then(alert); // 1

ex함수는 1를 반환하지만 실제로는 Promise 객체에 감싸져서 반환된다. 그렇게 때문에 then메소드로 1 alert를 띄울 수 있다

await

Promise의 결과 값을 가져오기 위해 .then() 메소드 대신 await 키워드를 사용할 수 있다. await은 오직 async 함수 내에서만 사용할 수 있다.

await는 Promise의 비동기 처리가 완료될 때까지 함수의 실행을 일시 중단한다.

동작 순서와 방식
Promise 처리 대기 : await 키워드를 사용하면, 그 뒤에 오는 Promise가 resolve(성공)되어 결과값을 반환할 때까지 코드의 실행을 멈춥니다. 이로 인해 비동기적으로 동작하는 코드를 마치 동기적인 코드처럼 작성할 수 있게 됩니다.

결과값 반환 : Promise가 성공적으로 resolve 되면, 그 결과값은 await 표현식 전체를 대체합니다. 즉, let result = await promise;라고 쓰면 promise가 resolve된 값이 result 변수에 할당됩니다.

에러 핸들링 : 만약 Promise가 reject(실패)되면, await 표현식은 해당 에러를 throw합니다. 이 경우 try/catch 문을 사용하여 에러를 잡아낼 수 있습니다.

async function getPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) { // HTTP 상태 코드가 200-299 사이가 아니면 에러 처리
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json(); // 비동기적으로 JSON 응답을 파싱
    console.log(data); // 콘솔에 데이터 출력
  } catch (error) {
    console.log('Error:', error); // 에러 발생 시 콘솔에 에러 메시지 출력
  }
}

getPosts();

위의 코드에서 const response = await fetch('https://jsonplaceholder.typicode.com/posts'); : fetch() 함수를 호출하여 웹 API로부터 데이터를 요청한다.
이 때, fetch() 함수는 Promise 객체를 반환하며, 그 결과가 준비될 때까지 기다린다(await). 이 결과가 준비되면 (즉, Promise가 resolve 되면), 그 값을 response 변수에 할당한다.

const data = await response.json();
여기서도 비동기 처리가 필요한데, 그 이유는 네트워크로부터 전체 응답 본문을 받아오는 데 시간이 걸리기 때문이다.

마지막으로 console.log(data)로 콘솔에 데이터를 출력한다.
만약 중간에 어떤 에러가 발생한다면 catch 블록에서 해당 에러를 잡아내어 콘솔에 출력하게 된다.