Await 정리

await는 JavaScript에서 비동기 프로그래밍을 더 간결하고 직관적으로 작성할 수 있도록 도와주는 구문이다. await는 Promise가 해결될 때까지 코드 실행을 일시 중지하고, 그 결과를 반환하는 기능을 제공한다.

1. 기본 개념

• 설명: await는 비동기 함수(async 함수) 내에서만 사용할 수 있으며, Promise가 해결될 때까지 코드 실행을 일시 중지하고, 해결된 값을 반환한다. 이는 비동기 코드의 흐름을 동기적으로 작성할 수 있게 해준다.
• 예시

const result = await promise;

2. async 함수와의 관계

• 설명: await는 async 함수 안에서만 사용할 수 있다. async 함수는 항상 Promise를 반환하며, await를 사용하여 Promise의 결과를 직접 받을 수 있다.
• 예시

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

3. Promise의 처리

• 설명: await는 Promise가 해결되거나 거부될 때까지 기다리며, Promise가 해결되면 결과 값을 반환한다. 만약 Promise가 거부되면, await 표현식에서 예외가 발생하고, 이를 try-catch 블록으로 처리할 수 있다.
• 예시

async function getUserData() {
  try {
    const user = await fetchUser();
    console.log(user);
  } catch (error) {
    console.error('Failed to fetch user:', error);
  }
}

4. 비동기 함수 내에서의 사용

• 설명: 비동기 함수 내에서 await를 사용하면, 비동기 작업의 결과를 기다린 후 그 결과를 변수에 할당할 수 있다. 이로 인해 비동기 작업이 동기적으로 처리되는 것처럼 코드가 작성된다.
• 예시

async function processData() {
  const data = await fetchData();
  console.log(data);
}

5. 여러 await 사용

• 설명: 여러 비동기 작업을 순차적으로 처리할 때 await를 여러 번 사용할 수 있다. 각 await는 이전 Promise가 해결될 때까지 기다린다.
• 예시

async function sequentialTasks() {
  const task1 = await fetchTask1();
  const task2 = await fetchTask2();
  console.log(task1, task2);
}

6. 병렬 비동기 작업

• 설명: 여러 비동기 작업을 병렬로 처리할 때는 Promise.all을 사용하여 여러 Promise를 동시에 처리할 수 있다. await를 사용하여 Promise.all의 결과를 받을 수 있다.
• 예시

async function parallelTasks() {
  const [result1, result2] = await Promise.all([fetchTask1(), fetchTask2()]);
  console.log(result1, result2);
}

7. 비동기 이터레이션

• 설명: await는 비동기 반복문에서도 사용할 수 있다. for-await-of 문을 사용하여 비동기 이터러블을 반복할 수 있다.
• 예시

async function processItems(items) {
  for await (const item of items) {
    console.log(item);
  }
}

8. await의 제한 사항

• 비동기 함수 밖에서 사용 불가: await는 async 함수 내에서만 사용할 수 있다. 비동기 함수 밖에서 await를 사용하면 문법 오류가 발생한다.
• 동기 코드와의 혼합: await는 비동기 작업을 동기적으로 작성하는 데 유용하지만, 코드의 실행 흐름을 이해하기 어렵게 할 수 있으므로, 적절히 사용해야 한다.

9. 에러 처리

• 설명: await는 Promise가 거부될 경우 예외를 발생시키므로, 이를 적절히 처리하기 위해 try-catch 블록을 사용해야 한다.
• 예시

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

 

 

await는 비동기 작업을 간결하고 읽기 쉽게 작성할 수 있는 강력한 도구이다. 비동기 함수와 함께 사용할 때 코드의 흐름을 직관적으로 작성할 수 있으며, 비동기 작업의 결과를 효과적으로 처리할 수 있다.