동기와 비동기는 어떤 작업 혹은 그와 연관된 작업을 처리하고자 하는 시각의 차이이다.
다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출된다.
코드가 길어지면 가독성이 떨어져 관리어려움 → 콜백헬
const f1=(callback)=>{
setTimeout(function(){
console.log("1번 주문완료");
callback();
}, 1000);
};
const f2=(callback)=>{
setTimeout(function(){
console.log("2번 주문완료");
callback();
}, 2000);
};
const f3=(callback)=>{
setTimeout(function(){
console.log("3번 주문완료");
callback();
}, 1000);
};
console.log('시작')
f1(function(){
f2(function(){
f3(function(){
console.log("끝")
});
});
});
비동기적으로 실행하는 작업의 결과를 나타내는 객체 (비동기의 결과를 객체화 시킴)
콜백 행들링하기 좋다
const pf1 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("1번 주문완료");
}, 1000);
});
};
const pf2 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("2번 주문완료");
}, 2000);
});
};
const pf3 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("3번 주문완료");
}, 3000);
});
};
console.log("시작");
pf1()
.then((res) => pf2(res)) //f1(프로미스반환)실행, resolve함수를 실행으로 넘긴값을 f2로 넘겨줌
.then((res) => pf3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(() => {
console.log("끝");
});
가장 간편함, 프로미스의 then메소드를 체인형식으로 호출하는것보다 가독성이 좋음
const pf1 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("1번 주문완료");
}, 1000);
});
};
const pf2 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("2번 주문완료");
}, 2000);
});
};
const pf3 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("3번 주문완료");
}, 3000);
});
};
console.log("시작");
async function order() { //await는 async함수 내부에서만 사용가능 일반함수에서 사용하면 에러
const result1 = await pf1();//프로미스 차례가 될때까지 기다림 result에 pf1의 resolve된 값을 넣어줌
const result2 = await pf2(result1);
const result3 = await pf3(result2);
console.log(result3);
console.log("종료");
//result1 변수에 pf1()데이터가 기다렸다가 들어가니깐 promise의 then보다 가독성이 좋음
}
order();