/*
생성자를 통해서 새로운 프로미스 객체를 만들 수 있다.
생성자의 인자로 executor라는 하마수를 이용한다.
*/
// new Promise(/*excutor*/);
// /* excoutor 함수는 resolve와 reject 를 인자로 가진다
// (resolve, reject) => { ...}
// resolve와 reject는 함수.
// resolve(), reject() */
// new Promise(/*executor */ (resolve, reject) => {});
// // 생성자를 통해서 프로미스 객체를 마나드는 순간 pending(대기)상태가 된다.
// new Promise((resolve, reject) => {} ); //만든 순간 대기상태가 된다.
// // executor 함수 인자 중 하나인 resolve 함수를 실행하면, fulfilled(이행 )상태가 된다.
// new Promise((resolve, reject) => {
// //...
// resolve(); //fulfilled상태로 돌입한다.
// })
// excutor 함수 인자 중 하나인 reject함수를 실행하면 rejected(거부)상태가 된다.
// new Promise((resolve, reject) => {
// reject(); //rejected 상태가 돌입한다.
// })
// new Promise((resolve, reject) => {
// /* pending */
// setTimeout(() => {
// resolve();/* fulfilled */
// }, 1000);
// })
// p 라는 프로미스 객체가 fulfilled 되는 시점에 p.then 안에 설정한 callback 함수가 실행된다.
// const p = new Promise((resolve, reject) => {
// /* pending */
// setTimeout(() => {
// resolve();/* fulfilled */
// }, 1000);
// })
// p.then(/*callback*/() => {
// console.log('1000ms 후에 fulfilled됩니다.')
// })
// /* then을 설정하는 시점을 정확히하고,
// 함수의 실행과 동시에 프로미스 객체를 만들면서 pending 이 시작하도록 하기 위해
// promise객체를 생성하면서 리턴하는 함수 (p)를 만들어 함수 (p)실행과 동시에 then을 설정한다. */
// function p() {
// return new Promise((resolve, reject) => {
// /* pending */
// setTimeout(() => {
// resolve();/* fulfilled */
// }, 1000);
// })
// }
// p.then(/*callback*/() => {
// console.log('1000ms 후에 fulfilled됩니다.')
// })
// // 마친가지로 프로미스 객체가 reject되는 시점에 p.catch 안에 설정한 callback 함수가 실행된다.
// function p() {
// return new Promise((resolve, reject) => {
// /* pending */
// setTimeout(() => {
// reject();/* rejected */
// }, 1000);
// })
// }
// p()
// .then(/*callback*/() => {
// console.log('1000ms 후에 fulfilled됩니다.')
// })
// .catch(() => {
// console.log('1000ms 후에 rejected됩니다.')
// });
/* excutor 의 resolve 함수를 실행할 때 인자를 넣어 실행하면, then 의 callback 함수를 인자로 받을 수 있다.
resolve('hello');
then((message) => {...})
*/
function p() {
return new Promise((resolve, reject) => {
/* pending */
setTimeout(() => {
// resolve('hello');/* fulfilled */
reject('error'); /* rejected */
}, 1000);
})
}
p()
.then(/*callback*/(message) => {
console.log('1000ms 후에 fulfilled됩니다.', message)
})
.catch((reason) => {
console.log('1000ms 후에 rejected됩니다.', reason)
});
/* 보통 reject 함수를 실행하며 rejected 되는 이유를 넘기는데, 표준 내장 객체인 Error 의 생성자를 이용하여 Error 객체를 만든다. */
function p() {
return new Promise((resolve, reject) => {
/* pending */
setTimeout(() => {
// resolve('hello');/* fulfilled */
reject(new Error('bad')); /* rejected */
}, 1000);
})
}
p()
.then(/*callback*/(message) => {
console.log('1000ms 후에 fulfilled됩니다.', message)
})
.catch((error) => {
console.log('1000ms 후에 rejected됩니다.', error)
});
/* fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .finally()를 설정하고, 함수를 인자로 넣는다. */
function p() {
return new Promise((resolve, reject) => {
/* pending */
setTimeout(() => {
// resolve('hello');/* fulfilled */
reject(new Error('bad')); /* rejected */
}, 1000);
})
}
p()
.then(/*callback*/(message) => {
console.log('1000ms 후에 fulfilled됩니다.', message);
})
.catch((error) => {
console.log('1000ms 후에 rejected됩니다.', error);
})
.finally(() => {
console.log('end');
});
/* 보통 비동기 작업을 할 때, callback 함수를 인자로 넣어 로직이 끝나면 callback 함수를 호출한다. 이런 경우 함수가 아래로 진행되지 않고, callback 함수 안으로 진행된다. */
function c(callback) {
setTimeout(() => {
callback();
}, 1000);
}
c(() => {
console.log('1000ms 후에 callback 함수가 실행됩니다.')
});
c(() => {
c(() => {
console.log('2000ms 후에 callback 함수가 실행됩니다.')
});
});
/* then 함수에서 다시 프로미스 객체를 리턴하느 방법을 통해 체이닝하면, 비동기 작업을 순차적으로 아래로 표현할 수 있다.
then 에 함수를 넣는 여러 방법을 확인해보자. */
function p() {
return new Promise((resolve, reject) => {
setTimeout(() => {
}, 1000);
});
}
p()
.then(() => {
return p();
}) // 1초 후에 불림
.then(()=> p()) // 2s 후에 불림
.then(p) //3초 후에 불림
.then(() => {
console.log('4000ms 후에 fulfilled가 됩니다.');
})
/*
value 가 프로미스 객체인지 아닌지 알 수 없는 경우, 사용하면 연결된 then 메서드를 실행합니다.
value 가 프로미스 객체이면, resolve 된 then 메서드를 실행.
value 가 프로미스 객체가 아니면, value 를 인자로 보내면서 then 메서드를 실행
*/
Promise.resolve(/* value */);
Promise.resolve(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('foo');
}, 1000);
})).then((data) => {
console.log('프로미스 객체인 경우, resolve 된 결과를 받아 then 이 실행이 된다', data);
});
Promise.resolve('bar').then(data => {
console.log('then 메서드가 없는 경우, fulfilled 됩니다.', data);
});
/* promise.reject를 사용하면, catch 로 연결된 rejected 상태로 변경된다. */
Promise.reject(/* value */);
Promise.reject(new Error('reason'))
.then(error => {})
.catch(error => {
console.log(error);
});
/* Promise 객체 여러개를 생성하여,
배열로 만들어 인자로 넣고 Promise.all을 실행하면, 배열의 모든 프로미스 객체들인 fulfilled 되었을 때, then의 함수가 실행됩니다.
then의 함수의 인자로 프로미스 객체들의 resolve 인자값을 배열로 돌려준다 */
// Promise.all([프로미스 객체들]);
function p(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(ms);
}, ms);
})
}
Promise.all([p(1000), p(2000), p(3000)]).then((messages) => {
console.log('모두 fulfilled 된 이후에 실행된다.', messages);
})
// 모두 fulfilled 된 이후에 실행된다. [1000, 2000, 3000]
/*
프로미스 객체를 여러개 생성하여, 배열로 만들어 인자로 넣고 Promise.race를 실행하면,
배열의 모든 프로미스 객체들 중 가장 먼저 fulfilled 된 것으로, then 의 함수가 실행된다.
then의 함수의 인자로 가장 먼저 fulfilled 된 프로미스 객체의 resolve 인자값을 돌려준다. */
// Promise.race([프로미스 객체들])
function p(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(ms);
}, ms);
})
}
Promise.race([p(1000), p(2000), p(3000)]).then((messages) => {
console.log('가장 빠른 하나가 fulfilled 된 이후에 실행된다.', messages);
})
// 가장 빠른 하나가 fulfilled 된 이후에 실행된다. 1000
