프로미스는 완료 또는 실패를 나타내주는 객체이다.
const fakeRequestPromise = (url) => {
//promise를 사용할 때는 return new Promise()를 사용해준다
//Promise()의 첫번째 파라미터로 resolve - 요청이 성공했을 때 실행할 함수 파라미터로 꼭 넣어준다 문법임
//Promise()의 두번째 파라미터로 reject - 요청이 실패했을 때 실행할 함수를 파라미터로 꼭 넣어준다 문법임
//밑에 함수를 실행할 때 then이 resolve로
// catch가 reject로 들어옴
return new Promise((resolve, reject) => {
const delay = Math.floor(Math.random() * 4000) + 500;
setTimeout(() => {
if (delay > 4000) {
reject("Connection Timeout");
} else {
resolve(`Here is your fake data from ${url}`);
}
});
});
};
//프로미스객체로 생성한 함수를 실행
fakeRequestPromise("book.com/page1")
//.then then은 위에 함수를 선언할 때 Promise()의 파라미터인 resolve
//
.then((resolveParams) => {
console.log("성공했어요");
console.log("1번째 요청");
console.log(resolveParams);
fakeRequestPromise("book.com/page2")
.then((resolveParams) => {
console.log("성공했어요");
console.log("2번째 요청");
console.log(resolveParams);
fakeRequestPromise("book.com/page3")
.then((resolveParams) => {
console.log("성공했어요");
console.log("3번째 요청");
console.log(resolveParams);
})
//.catch catch는 위에 함수를 선언할 때 Promise()의 파라미터인 reject
.catch((rejectParams) => {
console.log("실패했어요");
console.log("3번째 요청");
console.log(rejectParams);
});
})
.catch((rejectParams) => {
console.log("실패했어요");
console.log("2번째 요청");
console.log(rejectParams);
});
})
.catch((rejectParams) => {
console.log("1번째 요청");
console.log("실패했어요");
console.log(rejectParams);
});
//위 코드의 중첩을 피하기 위해서는 return을 이용해준다.
fakeRequestPromise("yelp.com/api/coffee/page1")
.then((resolveParams) => {
console.log(resolveParams);
console.log("첫번째 요청 성공");
//then에서 return 값으로 다음의 요청을 리턴해줌
return fakeRequestPromise("yelp.com/api/coffee/page2");
})
//.then을 중첩할 필요없이 같은 단계에서 사용할 수 있음
.then((resolveParams) => {
console.log(resolveParams);
console.log("두번째 요청 성공");
return fakeRequestPromise("yelp.com/api/coffee/page3");
})
//.catch는 한번만 사용해도 됨.
.catch((rejectParams) => {
console.log(rejectParams);
console.log("실패");
});