const pr = new Promise((resolve, reject) => {
(resolve: 성공했을 때 실행되는 함수, reject: 실패했을 때 실행되는 함수)
//code
});
→ 어떤 일이 완료된 이후 실행되는 함수: callback 함수
<new Promise>
state: pending(대기)
result: undefined
↓
resolve(value) ☞ state: fulfilled(이행됨)
result: value (resolve로 전달받은 값)
reject(error) ☞ state: rejected(거부됨)
result: error
ex)
const pr = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('OK')
}, 3000)
});
state: pending(대기) ☞ state: fulfilled(이행됨)
result: undefined (3s) result: 'OK'
const pr = new Promise((resolve, reject) => {
setTimeout(()=>{
reject(new Error('error..'))
}, 3000)
});
state: pending(대기) ☞ state: rejected(거부됨)
result: undefined (3s) result: error
→판매자의 코드: 주문을 받으면 3초 후에 성공인지 실패인지 알려줌.
소비자의 코드(then):
pr.then(
function(result){}, //이행되었을 때 실행, result = 'OK'
function(err){} //거부되었을 때 실행, err = 에러값
)
const pr = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('OK')
}, 3000)
});
pr.then(
function(result){
console.log(result + '가지러 가자.'); //"OK가지러 가자."
},
function(err){
console.log('다시 주문해주세요..');
}
);
거부되었을 때 = catch함수로 대체 가능
pr.then( pr.then(
function(result){}, → function(result){}
function(err){} ).catch(
); function(err){}
)
finally = 이행되었든, 거부되었든 실행
pr.then(
function(result){}
).catch(
function(err){}
).finally(
function(){
console.log('--- 주문 끝 ---')
}
)
const pr = new Promise((resolve, reject)=> {
setTimeout(()=> {
resolve("OK");
}, 1000);
});
console.log("시작");
pr.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
console.log("끝");
});
*Callback Hell
const f1 = (callback) => {
setTimeout(function () {
console.log("1번 주문 완료");
callback();
}, 1000);
};
const f2 = (callback) => {
setTimeout(function () {
console.log("2번 주문 완료");
callback();
}, 3000);
};
const f3 = (callback) => {
setTimeout(function () {
console.log("3번 주문 완료");
callback();
}, 2000);
};
console.log('시작')
f1(function(){
f2(function(){
f3(function(){
console.log("끝");
});
});
});
*Promise Chain
const f1 = () => {
return new Promise((res, rej)=> {
setTimeout(() => {
res("1번 주문 완료");
}, 1000);
});
};
const f2 = (message) => {
console.log(message);
return new Promise((res, rej)=> {
setTimeout(() => {
res("2번 주문 완료");
}, 3000);
});
};
const f3 = (message) => {
console.log(message);
return new Promise((res, rej)=> {
setTimeout(() => {
res("3번 주문 완료");
}, 2000);
});
};
console.log('시작');
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(() => {
console.log("끝");
});
const f1 = () => {
return new Promise((res, rej)=> {
setTimeout(() => {
res("1번 주문 완료");
}, 1000);
});
};
const f2 = (message) => {
console.log(message);
return new Promise((res, rej)=> {
setTimeout(() => {
rej("xxx");
}, 3000);
});
};
const f3 = (message) => {
console.log(message);
return new Promise((res, rej)=> {
setTimeout(() => {
res("3번 주문 완료");
}, 2000);
});
};
//Promise.all
console.time("x")
Promise.all([f1(), f2(), f3()]).then((res) => {
console.log(res);
console.timeEnd("x");
});
//Promise.race : 하나라도 완료되면 종료
console.time("x")
Promise.race([f1(), f2(), f3()]).then((res) => {
console.log(res);
console.timeEnd("x");
});
console.log("시작");
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(() => {
console.log("시작");
});