[JS] 자바스크립트 비동기처리(2) - async / await 이해하기

 

[JS] 자바스크립트 비동기처리란? (1)

 

지난 글에서는 자바스크립트의 비동기처리에 대해서 포스팅해보았다.

이번 글에서는 비동기처리의 핵심인 async 와 await 에 대해서 다루어보겠다.

 

😱 async 와 await

---

async:

함수의 앞에 붙여서 해당 함수가 비동기 함수임을 나타낸다.

즉 function 앞에 붙어야 한다. 

 

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.

프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

 

 

🧐 프로미스(promise) 는 또 뭔데??

 

비동기 작업이 최종적으로 만나는 완료, 실패, 그 결과값들을 나타낸다.

즉, 비동기 연산이 종료된 이후의 결과값, 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 

 

여기서 이름이 promise 인 이유가 드러나는데!

최종 결과가 아니라 미래의 어떤 시점에 이러한 결과를 제공할 것이라는 promise 를 반환하는 것이다.

따라서 then, 혹은 catch, finally 와 함께 쓰여 추가 작업을 연결할 수 있다.

 

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료.
• 거부(rejected): 연산이 실패.

 

 

 

만약 Promise<void> 를 사용하면 , 함수가 완료되었다는 것만 알릴 뿐 값을 반환하지 않는다.

 

---

await:

일반 함수 안에서는 쓸 수가 없고, async 안에서만 쓰인다.

말 그대로 promise 객체가 완료될 때까지 함수 실행을 기다리게 만든다. 즉, 코드를 일시 중지한다. 

 

잠시 기다렸다가, 프라미스가 처리되면 그 결과와 함께 실행이 완료된다.

프라미스가 처리되길 기다리는 동안엔 엔진이 다른 코드를 실행하는 일을 할 수 있다.

 

 

 

🤦🏻‍♀️ 코드 예시 

---

async function asyncExample() {
    console.log('첫 번째 시작');
    await new Promise(resolve => setTimeout(resolve, 3000));  // 3초 기다림
    console.log('첫 번째 완료');

    console.log('두 번째 시작');
    await new Promise(resolve => setTimeout(resolve, 2000));  // 2초 기다림
    console.log('두 번째 완료');
}

asyncExample();

 

이렇게 하면 결과는 (1) 에서 봤던 결과와 동일하지만, 처리하는 과정에서 동시에 진행할 수 있음을 알려준다. 

만약 코드가 더 복잡해지고 우리가 웹페이지나 어플을 만드는 코드를 짤 때는 병렬적으로 수행해야 할 때가 많은데

그럴 때 유용하다.