JS: async 와 await

export async function getTest(testId: string) {
  try {
    const response = await infoApiFetcher.get(`/test/${cafeId}/view`);
    return response.result;
  } catch (error) {
    console.error('Error fetching test :', error);
    throw error;
  }
}

async와 await 키워드는 JavaScript에서 비동기 프로그래밍을 보다 쉽게 다루기 위해 도입된 문법입니다. 이를 통해 비동기 코드를 작성할 때 콜백 지옥(callback hell)이나 복잡한 .then 체인을 사용하지 않고도 직관적이고 간결하게 코드를 작성할 수 있습니다.

 

async와 await 사용 이유:

 

1. 비동기 함수 선언 (async):

• async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환합니다.

• 함수 내에서 await 키워드를 사용할 수 있게 합니다.

2. 비동기 코드의 동기식 표현 (await):

• await 키워드는 Promise가 처리될 때까지 함수의 실행을 일시 중지합니다.

• Promise가 해결되면, await는 그 결과 값을 반환하고 함수의 실행을 재개합니다.

• await는 async 함수 안에서만 사용할 수 있습니다.

 

 

코드에서의 역할:

export async function getTest(testId: string) {
  const response = await infoApiFetcher.get(`/test/${testId}/view`);
  return response.result;
}

 

코드 분석:

 

1. async 함수:

• getTest 함수는 async 키워드로 선언되었습니다.

• 이 함수는 항상 Promise를 반환합니다. 만약 함수가 명시적으로 Promise를 반환하지 않으면, 반환된 값은 자동으로 Promise.resolve로 감싸집니다.

 

2. await 표현식:

• await 키워드는 infoApiFetcher.get 호출이 반환하는 Promise가 처리될 때까지 기다립니다.

• Promise가 해결되면 response 변수는 Promise의 결과 값으로 설정됩니다.

• 이 과정은 비동기적으로 이루어지지만, 코드 구조는 동기적인 코드처럼 읽히게 됩니다.

 

3. 결과 반환:

• response 객체의 result 속성을 반환합니다.

• 이 반환 값은 최종적으로 getTopSkin 함수가 반환하는 Promise의 해결 값이 됩니다.

 

장점:

 

1. 가독성:

• 비동기 작업을 동기식 코드처럼 작성할 수 있어 가독성이 향상됩니다.

• 코드 흐름을 쉽게 이해할 수 있습니다.

2. 에러 처리:

• try...catch 구문을 사용하여 비동기 코드에서 발생하는 에러를 동기 코드처럼 처리할 수 있습니다.

• 예외 처리 로직이 명확하고 간결해집니다.

3. 코드 유지보수:

• 콜백이나 .then 체인에 비해 코드가 간결하고 명확하므로 유지보수가 용이합니다.

 

에러 처리 예시:

export async function getTest(testId: string) {
  try {
    const response = await infoApiFetcher.get(`/test/${testId}/view`);
    return response.result;
  } catch (error) {
    console.error('Error fetching test:', error);
    throw error;
  }
}

위 코드에서 async와 await를 사용하면 비동기 작업을 보다 직관적이고 간결하게 작성할 수 있으며, 에러 처리를 쉽게 할 수 있습니다.