promise

이용원·2022년 11월 23일
0

JAVASCRIPT

목록 보기
30/34

프로미스는 완료 또는 실패를 나타내주는 객체이다.

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("실패");
  });





0개의 댓글

관련 채용 정보