728x90
반응형
Javascript Async (비동기 처리)
2023.12.06에 작성됨
Javascript에서 비동기처리를 하기 위해서는 Promise 객체를 이용한다.
Promise는 3가지 중 하나의 Status를 갖는다.
- pending (작업이 진행중인 상태)
- fulfilled (작업이 성공적으로 완료된 상태)
- rejected (작업이 실패한 상태)
Javascript의 비동기는 두 부분으로 나누어 생각할 수 있는데 Promise를 생성하는 Producer 와 사용하는 Consumer 이다.
- Producer:
Promise 객체는 executor(resolve, reject) 라는 콜백 함수를 인자로 받아서 생성하며,
Promise 객체가 생성되는 순간 executor는 실행된다.
const promise = new Promise((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 를 사용한 경우
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();
참고:
728x90
반응형
'IT노트 > 소프트웨어' 카테고리의 다른 글
| Typescript 세팅하기 (1) | 2023.12.20 |
|---|---|
| [끄적이다] VSCode에 PlantUML 설치하고 사용하기 (0) | 2022.01.06 |
| [끄적이다] 컴퓨터의 통역사 컴파일러 (Compiler) (0) | 2022.01.05 |
| [끄적이다] 패턴을 찾아라! 정규식(Regex) (0) | 2022.01.04 |
