1. resolve / reject = callback 함수이다.
2. resolve / reject 인수는 진행 상 필수요소이다.
> 없다고 해서 문제가 발생하는 것은 아니지만 아래 finally, then, catch가 실행되지 않는다.
3. 사용예시
1) val() 실행되며 안에 있는 프로미스 작동
2) setTimeout = 비동기 함수라서 동기 흐름에서 벗어나서 작동
3) setTimeout 안 함수로 랜덤함수를 만들어 5보다 작으면 성공/ 크면 실패로 성공실패 사례를 만듦
> 해당 부분은 원래 API가 연결이 안되는 등의 오류를 처리하기 위함. 연결되면 성공, 안되면 실패처럼.
> 하지만 여기서는 임의로 랜덤함수로 성공-실패를 지정해줌
4) 여기서 "안에 들어있는 콘솔로그" 는 프로미스 안에 있기 때문에 첫 번째로 출력됨
5) val()의 리턴값은 프로미스이고, 여기에 .finally(), .then(), .catch()를 이을 수 있음. 다만, 순서의 영향을 받음.
> .finally(콜백함수)는 성공여부와 상관없이 일어나는 일. 이름과 달리 위치에 따라 먼저 실행됨.
> .then(콜백함수)는 성공되는 경우 일어나는 일.
> .catch(콜백함수)는 실패되는 경우 일어나는 일.
4. 추측
1) val() - 왼쪽과 같은 코드를 짜면 success는 문제없이 실행되나 reject는 catch/then 모두 실행됨.
.catch() 아무래도 catch에서 뭔가를 더 할 수 있으니 이 리턴값을 처리하기 위해 then이 수행되는거 아닌가 싶음.
.then()
function val() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const random = Math.floor(Math.random() * 10);
if (random < 5) resolve(random);
reject(random);
console.log("안에 들어있는 콘솔로그");
}, 3000);
});
}
val()
.finally(() => console.log("시작"))
.then((success) => console.log("success", success))
.catch((reject) => console.log("reject", reject))
.finally(() => console.log("끝"));
// [ console ]
// case 1
// 안에 들어있는 콘솔로그
// 시작
// reject1 8
// 끝
// case 2
// 안에 들어있는 콘솔로그
// 시작
// success 3
// 끝
'개인공부' 카테고리의 다른 글
[REACT] React 렌더링 과정? (0) | 2023.04.26 |
---|---|
[IntersectionObserver] 바닐라자스_무한 스크롤 만들기 (1) | 2023.03.22 |
[CSS] display속성 발표자료 (0) | 2023.03.05 |
[ Naming ] Index.js / App.js 의 차이 (0) | 2023.02.14 |
[ Pattern ] Layered Architecture Pattern(계층화된 아키텍처 패턴) (0) | 2023.02.13 |