[자바 스크립트 ] 동기 / 비동기 (Promise 객체)

 

자바스크립트 : 동기 (비동기 작업도 가능 ) 

 

 

비동기 함수 : 다른코드의 실행을 기다리지않고 먼저 실행되는 코드   ( 콜백큐로 들어감 ) 

 

 

콜스택이 전부 비워지면 콜백큐에 있던 함수가 콜스택으로 들어가게되고 그때 다시 데이터를 출력 하게됨 

 

 

콜스택의 함수->  콜백큐 

 

 

 

---

프로미스 객체 

 

 

자바스크립트의 코드보다 서버는 느릴 수 밖에 없음 

 

아직 응답받지 못한 데이터(돌려받을 데이터 ) 를 미래에 어떤 시점에 결과를 제공하겠다는 의미 

 

---

 

 

 

promise 객체의 3가지 상태

 

• 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태
• 이행(fulfilled) : 연산 성공
• 거부(rejected) : 연산 실패 

 

 

---

 사용방법  (.then, .catch, .finally)

- Promise를  만든후  , 사용할 때는 then, catch, finally 를 통해 사용이 가능

 

resolve-   then을 통해 결과값을 얻고나서 처리 

reject -    catch를 통해 결과값을 얻고나서  처리 

 

finally -   resolve,reject 와 상관없이 무조건 처리 

 

 

---

 Promise Chaining

 

then을 나열해서 순차적으로 사용하는것 

 

마지막에 return 후 다시 then 으로 다시 사용 

 

 

 

---

 예시

 

 

// Promise 생성
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const randomNumber = Math.random();
  
  if (randomNumber > 0.5) {
    // 성공 시
    resolve(`Success! Random number is ${randomNumber}`);
  } else {
    // 실패 시
    reject(`Failure! Random number is ${randomNumber}`);
  }
});

// Promise 사용
myPromise
  .then((result) => {
    // 성공 시 실행되는 콜백 함수
    console.log(result);
  })
  .catch((error) => {
    // 실패 시 실행되는 콜백 함수
    console.error(error);
  });

 

 

 

const promiseTest  = function()  {

    return new Promise ((resolver,reject)=>{

   

       

        setTimeout(()=>{

           

            

 

            resolver('success');

        },2000);

    });

};

promiseTest().then((res)=>{             //fulfiled(성공) 가 되고 (시간이 되면,)  으로 매개변수 받아와서 res 출력됨(100)   

                                                                 

                                                         resolver의 데이터 (success) -> 출력       res-> success 문자열이 됨 

    console.log(res)

});

 

코드는 2초 뒤에 'success'를 출력하는 비동기 작업을 수행하는 Promise를 생성하고,

 

그 결과를 then 메서드를 통해 처리 하는 예시