new Promise 예제 코드

let job1 = new Promise(function(resolve, reject){ 
  // 최종적으로 성공적으로 작업이 끝났을 때, resolve( )호출
	resolve('resolved ok!!');
});
job1.then(function(data){
  console.log('data',data);
})

비동기적인 작업을 처리하기 위해서 사용된다

여기서 setTimeout을 걸어주면

let job1 = new Promise(function(resolve, reject){ 
  // 최종적으로 성공적으로 작업이 끝났을 때, resolve( )호출
	setTimeout(function(){
      resolve('resolved ok!!');
    },2000);
});
job1.then(function(data){
  console.log('data',data);
})

2초후 호출되는 것을 볼 수 있다

그렇지만 보통은 함수안에서 return 해주므로 코드 구조를 바꿔보자

function job2(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        resolve('resolved ok!!');
      },2000);
	});
}
job2().then(function(data){
  console.log('data',data);
})

똑같은 결과가 나타남을 알 수 있다

function job1(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        resolve('job1 ok!!');
      },2000);
	});
}
function job2(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        resolve('job2 ok!!');
      },2000);
	});
}

job1().then(function(data){
  console.log('data1',data);
  job2().then(function(data){
    console.log('data2', data);
  })
})

첫번째 결과가 나온 뒤, 2초후 두번째 결과가 출력됨을 알 수 있다
이러한 방식을 네이스틱 방식이라고 한다

체이닝 방식 예제코드

그러나 체이닝 방식을 주로 사용한다

function job1(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        resolve('job1 ok!!');
      },2000);
	});
}
function job2(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        resolve('job2 ok!!');
      },2000);
	});
}
// 체이닝 방식
job1()
  .then(function(data){
  console.log('data1',data);
  return job2();
})
.then(function (data){
  console.log('data2', data);
})

똑같은 결과가 출력됨을 알 수 있다

function job1(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        reject('job1 fail!!');
      },2000);
	});
}
function job2(){
  return new Promise(function(resolve, reject){ 
      setTimeout(function(){
        resolve('job2 ok!!');
      },2000);
	});
}
// 체이닝 방식
job1()
  .then(function(data){
  console.log('data1',data);
  return job2();
})
.catch(function (reason){
  console.log('reason', reason);
})
.then(function (data){
  console.log('data2', data);
})

첫번째 출력값이 reject 로 실패하였지만, data2가 호출되는 것을 볼 수 있다

만약, data2를 호출하고 싶지 않다면!

job1()
  .then(function(data){
  console.log('data1',data);
  return job2();
})
.catch(function (reason){
  console.log('reason', reason);
  // 반환값으로 reject를 호출하면
  // 뒤에 나오는 then은 실행되지 않는다
  return Promise.reject();
})
.then(function (data){
  console.log('data2', data);
})

catch로 인해 실행되는 함수의 return 값으로 Promise.reject()를 넣어주면 그 이후에 나오는 then()은 실행되지 않는다

🎥 생활코딩 - new Promise의 내용이니 참고하길 바란다