Javascript Async (비동기 처리)

Javascript Async (비동기 처리)

2023.12.06에 작성됨

 

Javascript에서 비동기처리를 하기 위해서는 Promise 객체를 이용한다.

Promise는 3가지 중 하나의 Status를 갖는다.

• pending (작업이 진행중인 상태)
• fulfilled (작업이 성공적으로 완료된 상태)
• rejected (작업이 실패한 상태)

Javascript의 비동기는 두 부분으로 나누어 생각할 수 있는데 Promise를 생성하는 Producer 와 사용하는 Consumer 이다.

1. Producer:

Promise 객체는 executor(resolve, reject) 라는 콜백 함수를 인자로 받아서 생성하며,

Promise 객체가 생성되는 순간 executor는 실행된다.

const promise = new Promise((resolve, reject) => {

// ... 어떤 작업 처리 ...

// 성공했을 경우

resolve();

// 실패했을 경우 

reject();

});

1. Consumer:

Promise로부터 나온 결과를 처리하는 부분이다.

promise

.then((value) => {})      // promise가 resolve()를 호출할 경우 실행됨.

.catch((error) => {})     // promise가 reject()를 호출할 경우 실행됨.

.finally(() => {});       // promise의 성공여부와 상관 없이 완료된 경우 최종적으로 실행됨.

Async/Await

Async/Await은 Promise를 조금 더 편리하게 사용할 수 있도록 고안된 문법 이다. (Syntactic Sugar)

Promise를 직접 사용한 비동기 함수와 Async/Await을 사용하여 만든 함수를 아래 예제를 통해 비교해보자.

// Promise 를 사용한 경우 

function readFileAsync() {

return new Promise((resolve, reject) => {

// ...어떤 작업 처리...

resolve(value);

});

}



function logFile() {

const file = readFileAsync();

file.then((value) => console.log(value));

}



logFile();

// Async-Await을 사용한 경우

async function readFileAsync() {

// ...어떤 작업 처리...

return value;

}

// 설명: 

// 함수 앞에 async를 붙이면 내부적으로 Promise를 반환하는 함수로 변환해준다. 

// 함수에서 value를 바로 리턴하는 것 처럼 보이지만 실제로는 Promise 객체를 반환한다. 



async function logFile() {

const file = await readFileAsync();

console.log(file);

}

// await 은 async 함수 안에서만 사용이 가능하며, 

// .then으로 처리했던 것과 같이 비동기함수의 수행 완료를 기다렸다가 

// resolve() 함수에 의해 처리된 값을 반환해준다. 

// reject() 함수에 의해 처리된 값을 처리할 때는 try-catch문을 통해서 처리할 수 있다. 



logFile();

---

참고:

https://youtu.be/JB_yU6Oe2eE?si=9z4D5QRuaqy4XRkO

https://youtu.be/aoQSOZfz3vQ?si=RVdbsuqfNgtwG_wp