Javascript의 비동기는 두 부분으로 나누어 생각할 수 있는데 Promise를 생성하는 Producer 와 사용하는 Consumer 이다.
Producer:
Promise 객체는 executor(resolve, reject) 라는 콜백 함수를 인자로 받아서 생성하며,
Promise 객체가 생성되는 순간 executor는 실행된다.
const promise = newPromise((resolve, reject) => {
// ... 어떤 작업 처리 ...// 성공했을 경우
resolve();
// 실패했을 경우
reject();
});
Consumer:
Promise로부터 나온 결과를 처리하는 부분이다.
promise
.then((value) => {}) // promise가 resolve()를 호출할 경우 실행됨.
.catch((error) => {}) // promise가 reject()를 호출할 경우 실행됨.
.finally(() => {}); // promise의 성공여부와 상관 없이 완료된 경우 최종적으로 실행됨.
Async/Await
Async/Await은 Promise를 조금 더 편리하게 사용할 수 있도록 고안된 문법 이다. (Syntactic Sugar)
Promise를 직접 사용한 비동기 함수와 Async/Await을 사용하여 만든 함수를 아래 예제를 통해 비교해보자.
// Promise 를 사용한 경우 functionreadFileAsync() {
returnnewPromise((resolve, reject) => {
// ...어떤 작업 처리...
resolve(value);
});
}
functionlogFile() {
const file = readFileAsync();
file.then((value) =>console.log(value));
}
logFile();
// Async-Await을 사용한 경우asyncfunctionreadFileAsync() {
// ...어떤 작업 처리...return value;
}
// 설명: // 함수 앞에 async를 붙이면 내부적으로 Promise를 반환하는 함수로 변환해준다. // 함수에서 value를 바로 리턴하는 것 처럼 보이지만 실제로는 Promise 객체를 반환한다. asyncfunctionlogFile() {
const file = await readFileAsync();
console.log(file);
}
// await 은 async 함수 안에서만 사용이 가능하며, // .then으로 처리했던 것과 같이 비동기함수의 수행 완료를 기다렸다가 // resolve() 함수에 의해 처리된 값을 반환해준다. // reject() 함수에 의해 처리된 값을 처리할 때는 try-catch문을 통해서 처리할 수 있다.
logFile();
