자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다.
먼저, 동기(Synchronous)와 비동기(Asynchronous)에 차이에 대해 확인하도록 하겠습니다.
동기(Synchronous):
1. 동시에 일어난다는 의미로 직렬적으로 로직을 처리함
2. 직렬적으로 일을 처리하므로 앞의 결과가 처리될 때 까지 뒤에 로직은 대기 후 순차적으로 진행
3. 설계가 직관적임
비동기(Asynchronous):
1. 동시에 일어나지 않은다는 의미로 병렬적으로 로직을 처리함
2. 병렬적으로 로직을 처리하므로 앞의 로직이 끝나지 않더라도 진행
3. 설계가 복잡함
자바스크립트에서 비동기처리를 위해 Promise를 많이 사용하는데, 콜백 함수를 사전에 살펴보고 Promise의 내용을 확인하도록 하겠습니다.
callback 함수:
어떤 함수의 실행이 끝난 뒤 호출되어 사용되는 함수를 의미합니다. 아래의 표를 확인하면 call("test", callback) 함수를 호출하고 call 함수를 처리 후 callback 함수를 처리하는 형태입니다. 주로 자바스크립트에서는 ajax에 success값에 많이 사용됩니다. 이 callback함수가 많아지고 남발되면 코드 관리가 어렵고 콜백지옥에 빠지기 쉽습니다. 이를 해결하기 위해 Promise가 나온 이유입니다.
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script> function callback(){ console.log("콜백1"); } function call(name, callback){ console.log("name: "+name) callback(); } call("test", callback); </script> </body></html> |
 |
Promise
아래 그림을 보면 Promise는 pending, fulfilled,reject의 상태를 가지고 있습니다.
참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
- Pending(대기중)
Promise 객체의 기본상태를 의미하며 비동기 결과가 나오지 않는 초기 상태를 의미합니다. - Fullfilled(이행 완료됨)
비동기 처리가 완료된 상태를 의미합니다. - Reject(거부됨)
비동기 처리가 완료는 되었지만 연산에 실패함을 의미합니다.
실습:
minusTest 함수를 호출하며 num 3을 입력합니다. 그 이후 setTimeout 1초(1000millisecond) 후 실행하라는 지연함수를 싱행하고 then 함수를 순서대로 호출하고 있습니다.
then은 primise 작업이 성공했을때,
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function minusTest(num){
return new Promise((resolve, reject) => {
setTimeout(function(){
num-=1;
if(num>=0)resolve(num);
else reject(num);
}, 1000);
});
}
minusTest(3).then((num)=>{
console.log("then2: "+num);
return minusTest(num)
}).then((num)=>{
console.log("then1: "+num);
return minusTest(num)
}).then((num)=>{
console.log("then0: "+num);
return minusTest(num)
}).catch((err) => console.log("err:"+err));
</script>
</body></html>
|
 |
자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.
'javascript > 기본' 카테고리의 다른 글
| javascript setTimeout, setInterval (0) | 2023.02.15 |
|---|---|
| javascript Promise Async/Await (0) | 2023.02.14 |
| javascript 연산자 기초 (0) | 2023.02.12 |
