JS - callback, promise

JS 강의 필기 + 추가

 

JS is synchronous.

Execute the code block by order after hoisting

callback function을 중첩하면 가독성이 떨어지고 유지 보수가 용이하지 않음

console.log('1');
setTimeout(() => {
    console.log(2);
}, 1000);   // 1초 뒤 콜백함수 실행
console.log('3');
// 1 3 2 순으로 출력됨

synchronous callback

function printImmediately(sentence){
    sentence();
}   // 이 부분은 hoisting 됨
printImmediately(() => console.log('hello'));

asynchronous callback

function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}   // 이 부분은 hoisting 됨
printWithDelay(() => console.log('async callback'), 2000); // 2초 지연 후 실행

---

Promise

a JS object for asynchronous operation

state: pending -> fulfilled or rejected

when a new Promise id created, the executor runs automatically.

producer

promise 생성. executor라는 콜백함수를 주는데, 이 안에 resolve(정상), reject(실패시) 이 두개의 콜백함수를 넣음.

new <T> executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;

promise를 만드는 순간 executor가 바로 실행됨. 네트워크 통신코드가 들어있었다면 그걸 바로 수행했을 것.

사용자가 요청했을 때(버튼클릭 등) 통신해야되는 경우라면 불필요한 통신이 발생할 수도 있음.

const promise = new Promise((resolve, reject) => {
    console.log('doing sth...');    // doing some heavy work
    
    setTimeout(() => {
        resolve('success');
        reject(new Error('no network'));    // JS에서 제공하는 class인 error로 만든 object
    }, 2000);
}); // 만들고 바로 doing sth... 출력됨

consumer

then: 정상수행

catch: 에러잡기

finally: 마지막에 공통수행

promise

.then(value => {
	console.log(value); // phin
})  // promise가 정상수행되어서 최종적으로 resolve(콜백함수)를 통해서 전달한 값이 value로 전달

.catch(error => {
	console.log(error);
})  // 실패시 catch없으면 uncaught 에러남.

.finally(() => {
	console.log('finally');
}); // 성공이든 실패든 상관 없이 실행

promise chaining

then과 catch가 return하는 것도 promise라 catch, finally를 이어서 호출할 수 있음

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num)); // 5 출력

error handling

const getHen = () => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('Hen', 1000));
    });
const getEgg = hen =>
    new Promise((resolve, reject) => {
        // setTimeout(() => resolve(`${hen} => Egg`), 1000); // 에러내기위해 resolve 주석 처리
        setTimeout(() => reject(new Error(`error int ${hen} => Egg`)), 1000);
    });
const cook = egg =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => Meal`), 1000);
    });

getHen()
.then(getEgg)   // 받아오는 값을 바로 넣어서 하나를 호출하는 경우 생략 가능. 원래 (hen => getEgg(hen))
.catch(error => {   // getEgg에서 문제가 생겨도 전체적인 Promise chain에 문제가 발생하지 않도록 처리
    return 'bread';
})
.then(cook)
.then(console.log)
.catch(console.log);