Promise

Jiwontwopunch·2022년 5월 6일
0

독학

목록 보기
50/102
post-thumbnail

Promise

비동기 작업을 더 수월하게 해준다.

생성자를 통해서 프로미스 객체를 만들 수 있다.
생성자의 인자로 executor 라는 함수를 이용한다. resolve(), reject()

생성자를 통해서 프로미스 객체를 만드는 순간, pending 대기 상태
resolve() 함수를 실행하면 fulfilled 이행 상태
reject() 함수를 실행하면 rejected 거부 상태

const myPromise = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('result');
    // reject(new Error());
  }, 1000)
});

myPromise.then(result=>{
  console.log(result); // result
}).catch(e=>{
  console.error(e);
})
function increaseAndPrint(n){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      const value= n+1;
      if(value===5){
        const error = new Error();
        error.name = 'valueIsFireError';
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0).then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.catch(e=>{
  console.error(e);
})
// 1 
function p() {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve();
    },1000);
  });
}
p().then(()=>{
  console.log('1000ms 후에 fulfilled 됩니다.');
});

// 1-1
function p() {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('hello');
    }, 1000);
  });
}
p().then((message)=>{
  console.log('1000ms 후에 fulfilled 됩니다.', message);
});
// 1000ms 후에 fulfilled 됩니다. hello
// 데이터 넘기는 부분 message 중요!
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.all([프로미스 객체들])
function p(ms){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve();
    }, ms);
  })
}
Promise.all([p(1000),p(2000),p(3000)]).then(()=>{
  console.log('모두 fulfilled된 이후에 실행');
})

0개의 댓글