async / await 사용법

 

(초보 프로그래머의 공부용이라 혹시 들어와서 보게 되실 경우 참고용으로만 받아들이시길)

 

 

 

 

면접에서 질문을 받게 된다면 Promise와의 차이점이라든가 다른 개념과 함께 물어볼 수 있고

 

비동기 동기 함수 관련 꼬리질문이 들어올 수 있다

 

 

---

 

 

async / await을 사용한 비동기 통신의 경우,

async 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다리게 할 수 있다

 

코드가 동기적으로 작성되어 가독성이 향상된다

즉 코드가 한 줄이 끝나야 다음 줄이 실행되는 식으로 동작하게 되는 것이다

 

원래 비동기 코드는 완료될 때까지 기다리지 않고 바로 다음 줄로 넘어간다

이러한 이유로 코드의 실행 순서와 코드의 작성 순서가 다를 수 있다

 

예를 들어 데이터를 서버에 요청한 후 서버로부터 데이터를 받아서 다음 작업을 수행해야하는데

데이터 요청을 한 후 그냥 바로 데이터가 있을 때 수행할 작업을 실행하게 되버리는 것이다

비동기적으로 코드가 실행되기에 의도하지 않게 동작하게 되는 것이다

 

하지만 async await 을 사용해서

비동기적으로 동작하는 코드를 동기적인 방식으로 순차적으로 작성할 수 있다

 

await 이라는 키워드는 자바스크립트 엔진에게 프로미스의 결과가 준비될 때까지 기다리라고 하는거고

그 결과 프로미스가 이행되면 다음 부분이 실행된다

 

이로 인해 코드의 가독성이 향상되고 코드 흐름 파악이 쉬워지게 된다

 

그리고 에러 처리의 경우 try - catch 문으로 관리하면 된다

 

 

이 async await의 장점은 프로미스 체인 작성의 번거로움을 줄여주는 것이다

 

 

예시 코드를 보면,

// 비동기로 데이터를 가져오는 작업을 수행하는 함수
async function fetchData() {
  try {
    // 서버에서 데이터를 가져오는 비동기 요청
    // await 키워드 써서 이 프로미스가 완료될 때까지 기다리는 것!
    const response = await fetch('https://api.example.com/data');
    
    // 프로미스가 이행되면 응답의 JSON을 추출
    const data = await response.json();
    
    // 추출된 데이터로 수행할 코드 작성
  } catch (error) {
    // 요청 과정에서 오류가 발생 시
    console.error(error);
  }
}

fetchData();

 

 

자바스크립트는 싱글 스레드 언어라서 

 

예를 들어 서버로부터 데이터를 요청하고 받아오는 작업은 네트워크 지연 등으로 즉시 완료가 되지 않을 수 있으니까

 

이런 '블로킹'을 피하기 위해 비동기 처리가 있는 것이다

 

 

참고로 프로미스는 자바스크립트의 비동기 처리 패턴 중 하나다

 

async await 나오기 이전부터 있던 개념이고 async await은 프로미스를 더 쉽게 사용할 수 있도록 나온 syntatic sugar 인 것이다

 

 

비동기 코드가 아닌 작업에는 await 사용할 필요가 당연히 없다

 

예를 들어 데이터 받아온 후 그 데이터로 계산하거나 DOM 업데이트 하는 등의 동기적인 작업을 수행한다면 await은 필요하지 않다

 

 

하지만 이 데이터를 가지고 추가적인 비동기 작업을 수행할 경우,

그 작업이 완료될 때까지 기다리게 해야할 때

즉 어떤 비동기 작업의 결과를 다음 코드 실행에 사용한다거나

비동기 작업들을 특정 순서대로 실행해야 하는 경우

await을 사용해야 한다

 

 

참고로,

프로미스는 ES6에 도입된 것으로 비동기 처리를 더 쉽게 하기 위해 도입된 것이다

 

그 이전에는 콜백 함수가 사용되었는데

여기서 발생하는 콜백 지옥을 해결하기 위해 프로미스가 나온 것이다

 

프로미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체로

.then(), .catch(), .finally() 메소드로 비동기 작업의 결과를 처리한다

코드의 가독성을 향상하고 에러 핸들링을 용이하게 하는 것이다

 

async await은 ES8에 도입된 더 새로운 비동기 처리 패턴으로

async 함수 내에 await 키워드를 사용해 프로미스 결과가 반환될 때까지 함수의 실행을 일시 중지하는 것이다

 

프로미스는 함수가 아니고 앞서 말했듯 비동기 연산의 최종 완료 또는 실패와 그 결과값을 나타내는 객체이며

생성 시 함수를 사용하는데.. 이건 프로미스에서 따로 작성해야할 듯

 

 

결론

1. async await은 자바스크립트에서 비동기 처리를 위한 패턴으로 ES8(2017)에 도입됨

2. async  함수 내부에서 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있다

3. 즉 코드가 동기적으로 작성되므로 코드의 가독성이 향상되고 코드의 실행 순서를 명확히 알 수 있다

4. await 키워드는 자바스크립트 엔진에게 프로미스의 완료를 기다리라고 지시하며, 프로미스가 이행되면 다음 부분 실행된다

5. 에러 처리는 try-catch 문 사용