async vs await

async와 await의 비교

1. async

• 정의: 함수 선언 앞에 async 키워드를 붙여 비동기 함수를 정의한다.

• 역할: 함수를 비동기 함수로 만들어주며, 이 함수는 항상 Promise 객체를 반환한다.

• 사용 예시:위 함수는 async 키워드를 통해 비동기 함수로 정의되었으며, 호출 시 Promise를 반환한다.

javascript코드 복사
async function fetchData() {
  // 이 함수는 항상 Promise를 반환한다.
  return "data";
}

2. await

• 정의: 비동기 함수 내부에서 사용되는 키워드이다.

• 역할: Promise 객체가 해결될 때까지 기다리며, 그 결과를 반환한다. await는 async 함수 안에서만 사용할 수 있다.

• 사용 예시:위 예시에서 await는 fetchData 함수가 반환하는 Promise가 해결될 때까지 기다리고, 그 결과를 data 변수에 할당한다.

javascript코드 복사
async function main() {
  const data = await fetchData();
  console.log(data); // "data"
}

예제 코드로 비교

javascript코드 복사
// 비동기 작업을 포함하는 함수 정의 (async)
async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

// 비동기 함수를 호출하고 결과를 처리하는 함수 (async 및 await)
async function main() {
  try {
    // await를 사용하여 fetchData 함수가 반환하는 Promise를 기다림
    const data = await fetchData();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// 메인 함수 실행
main();

요약 비교

1. 역할:
• async: 함수를 비동기적으로 정의하고, 항상 Promise 객체를 반환하도록 한다.
• await: 비동기 함수의 실행을 일시 중지하고, Promise가 해결될 때까지 기다린다. 그 결과를 반환.

2. 위치:
• async: 함수 선언부에 위치.
• await: async 함수 내부에서 사용되며, Promise 앞에 위치.

3. 사용 방식:
• async: 함수 선언 시 사용한다.
• await: 비동기 작업을 처리할 때 사용한다.

4. 결과:
• async: 비동기 함수를 정의하며, 호출 시 Promise를 반환.
• await: Promise가 해결될 때까지 기다리고, 그 결과 값을 반환.

결론