자바스크립트의 promise에 대해 이해해보자.
일반적으로 자바스크립트는 탑다운 방식으로 순차적으로 실행된다. A작업이 시작되면 A작업이 완료된 후 B작업이 시작되고 B작업이 마무리되면 그 다음 C작업이 시작된다. 하지만 Promise는 비동기적 방식으로 A promise가 완료되기 전에 B작업이 시작되고 이 후 언제 든 A promise가 완료되면 그 때 반환된다. 즉 main thread를 방해하지 않는 방식으로 작업이 수행되므로 사용자 입장에서는 훨씬 작업을 수월하게 이행할 수 있다.
글로 설명하려 하니 좀 어려우니 코드로 살펴보자.
우선 lazyDiv라는 함수이다. 이는 n를 dn으로 나눈다. 나누긴 나누는데 lazy라는 이름 그대로 setTimeout function을 이용해서 1초 쉰 후 실행하도록 했다. 명심해야 할 것은 lazyDiv함수는 실행 1초 후에 Promise를 반환한다는 점이다.
function lazyDiv(n,dn) {
return new Promise((res, rej) => {
setTimeout(() => {
if (dn != 0) {
res(n / dn);
} else {
rej(new Error("Can't devide by 0"));
}
}, 1000);
});
}
자 그럼 이제 then 을 이용해 promise의 값을 얻어보자. 그리고 다른 작업들을 포함 시켜 어떤 순서로 수행되는지 확인해 보자.
lazyDiv(5,2).then((result)=>{console.log(result)}).catch((err)=>console.log(err.message)); //작업1
console.log("hi"); //작업2
console.log("async function is in progress");//작업3
먼저 작업 1로 lazyDiv promise를 수행하고 작업2로 hi 를 콘솔에 프린트한다. 그리고 작업3 를 콘솔에 프린트한다. 결과가 어떨까? 일반적인 스크립트 함수라면 lazyDiv가 1초 후 계산을 완료할 때까지 기다린 후 작업2 와 작업3를 수행하겠지만 promise의 경우는 좀 다르다. 수행하면 아래와 같은 결과가 나온다.
hi
async function is in progress
2.5
즉 1초동안 lazyDiv가 계산을 끝낼 때 까지 기다리지 않고 작업2와 작업3가 먼저 실행된다.
물론 에러가 발생하는 경우에도 마찬가지이다.
lazyDiv(5,0).then((result)=>{console.log(result)}).catch((err)=>console.log(err.message)); //작업1
console.log("hi"); //작업2
console.log("async function is in progress");//작업3
hi
async function is in progress
Can't devide by 0
'Programmer > Javascript' 카테고리의 다른 글
Creat React App 이후 react 컴포넌트를 NPM package로 배포하기 (0) | 2019.10.20 |
---|---|
Javascript Promise 이해하기. (0) | 2018.11.20 |
AWS EC2 load balancer 모든 request 를 https로 redirection (0) | 2018.11.17 |