비동기 호출 callback, promise

이후경·2022년 9월 1일

비동기 호출 callback, promise

Js 동기식 처리

동기식 처리

한번에 하나의 작업만 수행하는 싱글스레드방식
자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행공간이 있는데 거기서 한번에 하나씩 수행해준다.

예외

시간이 오래 걸리는 코드는 stack에서 제외시켜 wep API라는 대기실에서 대기하게 하고 나중에 실행 시킨다. (ajax, setTimeout, eventLister 등) - 읽는 시점과 동작 시점이 다른 코드들
이런 처리 방식을 비동기방식이라고 함
실행이 오래걸린다고? 그럼 기다려 일단 실행 가능한 애들 먼저 실행해줄게
자바스크립트 언어자체의 기능이 아닌 자바스크립트 실행을 도와주는 웹브라우저가 해주는 역할

대표적으로 사용되는 곳은 서버쪽과 데이터를 주고 받을 때 사용하는데, 클라이언트쪽에서 서버쪽에 비동기 요청을 하고 클라이언트에서는 다른 작업을 수행하고 있다가 서버쪽에서 모든 작이 완료되면 resoponse를 해주면, 그 순간 전달받은 데이터를 클라이언트에서 사용하는 방식

console.log(1);
setTimeout(function(){
 console.log(2);
}, 1000);
console.log(3);

먼저 수행할 수 있는 1,3 출력 후 1초뒤 2 출력

callback

ES6버전 이전에 사용되던 비동기 처리 방법
다른 함수가 실행을 끝낸 뒤 실행되는 함수
코드를 통해 명시적으로 호출하는 함수가 아니라 함수를 등록해 놓은 후 어떠한 이벤트가 발생하거나, 특정 시점에 도달했을 때 시스템에서 호출하는 함수
파라미터로 함수를 전달받아서 함수의 내부에서 실행
쉽게 말해서 함수안에 들어가는 함수를 callback함수라고 한다.

콜백함수 사용이유

Js에서 비동기적 프로그램을 할 수 있기 때문
Js는 싱글 스레드를 사용하는데 멈춤을 방지해준다. 블로깅을 방지하여 싱글 스레드가 논블록킹으로 동작하게한다.

function add5(a, callback) {
 setTimeout(() => callback(a + 5), 100)
// 100ms가 지난 후 함수로 입력받은 callback에 a + 10값을 다시 입력하여 callback함수 호출
}
add5(10, function (res) { // add5가 입력받는 callback함수 정의 부분
 console.log(res)
});

add5 호출하는 부분 첫번째 인자는 5, 함수 생성 후 전달
add5함수 내부에서는 입력받은 함수 callback에 a + 5 후 다시 호출

Callback Hell

callback은 사용하기 편리하지만 연속적으로 사용하게 되면 유지보수가 힘들어진다는 단점이 있다.

add5(10, res => {
 add5(res, res => {
   add5(res, res => {
     add5(res, res => {
       console.log(res)
     })
   })
 })
})

이런식으로 몇번 연속 호출하게 되면 그것이 바로 지옥....

Promise

기본적으로는 callback함수와 하는 일이 같다.
Promise는 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 Promise자체 메소드인then()을 호출한다.
```
function add10(a) {
 return new Promise(resolve => setTimeout(() => resolve(a + 10), 100));
}//Promise사용 시 작업이 끝났음을 알려주는 resolve를 인자로 받아들임.
add10(10)
 .then(add10)
 .then(add10)
 .then(add10)
 .then((res) => console.log(res))

console.log(add10(10));
sPromise { <pending> }
```
promise는 then()과 같은 다른 메소드를 연속적으로 사용이 가능하다는 이점을 가지고 있다. callback함수를 사용했을 때와는 다르게 코드를 작성하고 이해하기 쉬워짐.

add10()가 결과값을 promise로 리턴한다.

Promise 장점

callback 함수와 비교해서 code 가 옆으로 길어지지가 않는다

let first = new Promise(function (resolve, reject) { // resolve 는 성공, reject 는 실패 한것을 나타냄
 resolve(); // resolve 가 실행이 되면 밑에 .then 이 실행이 됨
 reject(); // reject 가 실행이 되면 밑에 .catch 가 실행됨
});
first.then(() => {
 // first 가 성공일 경우 실행 할 코드
}).then(() => {
 // 그다음에 실행할 것
}).catch(() => {
 // catch 는 위의 코드가 실패 했을 경우 실행 하는 code
})