Promise에 대해서 (기본정리)

비동기정리 참고

Promise 3가지 상태

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

1. Pending

new Promise(function(resolve, reject) {
  // ...
});

2. Fulfilled

new Promise(function(resolve, reject) {
  resolve();
});

3. Rejected

new Promise(function(resolve, reject) {
  reject();
});

Promise 형태

return new Promise(function(resolve,reject){
  ...
});

1. Promise안에는 resolve나 reject와 관련된 내용을 수행하지않으면 pending 상태이다.
2. Promise안에는 return을 사용하는 것이 아니다.

Promise 예제

ex)

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);				//Fulfilled
      }
      reject(new Error("Request is failed"));	//Rejected
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

기본적 전체코드

const work1 = function() {
  return new Promise(function(resolve) {
    setTimeout(() => resolve('작업1 완료!'), 1000);
  });
}
const work2 = function() {
    return new Promise(function(resolve) {
      setTimeout(() => resolve('작업2 완료!'), 2000);
  });
}
const work3 = function() {
  return new Promise(function(resolve)  {
    setTimeout(() => resolve('작업3 완료!'), 3000);
  });
}

function w1(a){
  console.log('done after 1000ms:' + a);
  return work2();
}

function w2(b){
  console.log('done after 2000ms:' + b);
  return work3();
}

function w3(c){
  console.log(`done after 6000ms:${c}`);
}
work1()
  .then(w1)
  .then(w2)
  .then(w3);

1초뒤 작업1, 2초뒤 작업2, 3초뒤 작업3을 출력하는 내용 (총 6초 걸린다.)

주의해야 할 것

1. return할때는 new Promise의 형태로 하여 then이 받도록 한다.
2. then뒤의 함수가 받는 매개변수는 그 전 new Promise의 resolve에 있다.
3. new Promise(함수) 형태이다.
4. work1,work2,work3 함수들은 new Promise를 리턴하는 역할과 setTimeout에 의한 비동기를 실행하는 역할
5. w1,w2,w3 함수들은 필요한 결과를 매개변수로 받아서 출력시키고 비동기를 위한 new Promise를 리턴하는 함수들을 return 하는 역할

코드 실행 과정

실제 진행은

work1()
  .then(w1)
  .then(w2)
  .then(w3);

이 부분 이다.

work1 함수를 실행시킨다.
then의 앞에 new Promise를 리턴 시키는데 해당 Promise(함수)의 함수 부분에서 비동기로 setTimeout이 1초 기다리는 내용이 실행하면서 resolve로 '작업1 완료!'라는 내용을 다음 매개변수에 쓰이게한다.

w1 함수를 실행시킨다.
console.log가 출력되는데 이때 매개변수로 받은 a는 '작업1 완료!'이므로 'done after 1000ms:'작업1 완료!' 형태로 출력이다.
work2()를 리턴한다.

work2()
  .then(w2)
  .then(w3);

이와같은 형태로 바뀐다.

work2 함수를 실행시킨다.
then의 앞에 new Promise를 리턴 시키는데 해당 Promise(함수)의 함수 부분에서 비동기로 setTimeout이 2초 기다리는 내용을 실행하면서 resolve로 '작업2 완료!'라는 내용을 다음 매개변수에 쓰이게한다.

w2 함수를 실행시킨다.
console.log가 출력되는데 이때 매개변수로 받은 b는 '작업2 완료!'이므로 'done after 2000ms:'작업2 완료!' 형태로 출력이다.
work3()를 리턴한다.

work3()
   .then(w3);

이와같은 형태로 바뀐다.

work3 함수를 실행시킨다.
then의 앞에 new Promise를 리턴 시키는데 해당 Promise(함수)의 함수 부분에서 비동기로 setTimeout이 3초 기다리는 내용을 실행하면서 resolve로 '작업3 완료!'라는 내용을 다음 매개변수에 쓰이게한다.

w3 함수를 실행시킨다.
console.log가 출력되는데 이때 매개변수로 받은 c는 '작업3 완료!'이므로 'done after 3000ms:'작업3 완료!' 형태로 출력이다.

따라서 결과로는

done after 1000ms:작업1 완료!
done after 2000ms:작업2 완료!
done after 6000ms:작업3 완료!

형태로 나타난다.

코드 간단히 나타내기(화살표 함수이용)

const work1 = ()=> {
  return new Promise(resolve => {
    setTimeout(() => resolve('작업1 완료!'), 1000);
  });
}
const work2 = ()=> {
    return new Promise(resolve => {
    setTimeout(() => resolve('작업2 완료!'), 2000);
  });
}
const work3 = ()=>{
  return new Promise(resolve => {
    setTimeout(() => resolve('작업3 완료!'), 3000);
  });
}

function w1(a){
  console.log('done after 1000ms:' + a);
  return work2();
}

function w2(b){
  console.log('done after 2000ms:' + b);
  return work3();
}

function w3(c){
  console.log(`done after 3000ms:${c}`);
}
work1()
  .then(w1)
  .then(w2)
  .then(w3);

이렇게 정리 할 수 있다.

출처

프로미스