비동기(Asynchronous)

• 특정 코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것
• 태스크를 병렬적으로 수행하여 자원의 효율적 사용 가능

콜백(Callback) 함수

• 전달 인자로 다른 함수에 전달되는 함수
• 비동기 요청 시 응답 후 처리할 함수로, 태스크 완료 시 호출됨
• 비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우 언제 응답값을 받아올 수 있는지 예측 불가 → 처리 순서를 보장하기 위해 여러 콜백함수가 중첩되는 콜백 헬이 발생

Promise

• 비동기 처리를 위한 패턴으로 Promise 생성자 함수를 통해 인스턴스화 함

• 비동기 작업 완료 후 성공 혹 실패 값을 가진 Promise 객체를 생성하고 변수에 할당 후 반환

  // Promise 객체 생성자
  const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행할 콜백함수
    // 비동기 태스크
  
    if () { // 비동기 작업 성공 시 resolve 메서드 호출
      resolve("success");
    }
    else { // 비동기 작업 실패 시 reject 메서드 호출
      reject("fail");
    }
  });
  

• Promise 객체의 상태 정보

  • pending: 비동기 처리 수행 전
  • fulfilled: 비동기 처리 성공
  • rejected: 비동기 처리 실패

• Promise 후속 처리 메서드

  • then
    • Promise가 fulfilled 상태일 때 실행
    • Promise의 성공 결과 값(resolve())을 인자로 전달 받음
  • catch
    • Promise가 rejected 상태일 때 실행
    • Promise의 실패 결과 값(reject())을 인자로 전달 받음

• Promise 체이닝

  • then과 catch로 메서드를 체이닝하여 여러 개의 Promise 사용 가능 → 콜백 헬 해결

Async/Await

async function 함수명() {
	await 비동기처리메서드명();
}

• async
  • 해당 키워드를 붙인 함수는 항상 Promise 객체를 반환 (Promise가 아닌 것 포함)
  • 해당 함수의 return 값은 Promise 객체의 결괏값임
• await
  • 해당 키워드는 async 함수 내에서만 작동하며 Promise가 처리될 때까지 함수 실행을 기다리게 함
• 실행 순서가 예측이 불가능했던 비동기 작동 방식이 동기적으로 실행되는 코드처럼 예측 가능해진다는 장점
• 가독성이 좋고 쓰임이 쉬우나, async 함수 바깥의 최상위 레벨 코드에선 await을 사용할 수 없어 처리되지 못한 에러를 .then/catch등으로 처리해야 함