콜백지옥

• 비동기로 동작 시 다음과 같이 첫번 째 콜백 함수가 호출 후 다음 동작을 해야 하기 때문에 다음과 같이 계속 콜백안에 콜백을 선언하게 된다

callbackTest() {
      setTimeout(() => {
        console.log('show 1000');
        setTimeout(() => {
          console.log('show 2000');
          setTimeout(() => {
            console.log('show 3000');
          }, 3000);
        }, 2000);
      }, 1000);
}

콜백 지옥 Promise로 변경 하기

• 비동기로 동작 하는 로직을 new Promise 안의 콜백 함수안에서 동작 하도록 변경 한다. testPromise 함수 참조
• resolve는 promise.then() 호출 시 받을 파라미터 이며 reject는 promise.catch 호출 시 받을 파라미터 이다 reject에서는 예외 처리를 하면 된다.
• promiseTest 통해서 실행 해보자 .then() 호출 되면 setTimeout 비동기 동작 이 완료 되면 time 값을 파라미터로 받은 콜백이 호출 된다. 해당 콜백안에서 다음 비동기 기능을 수행 하여 다시 promise를 리턴 받거나 특정 값을 리턴해도 다음 .then() 콜백 파라미터로 받을 수 있다.

    promiseTest() {
      this.testPromise(1000)
        .then(resolve => {
          console.log('show Promise 1', resolve);
          return this.testPromise(2000)
        })
        .then(resolve => {
          console.log('show Promise 2', resolve);
          return 6000;
        })
        .then(resolve => {
          console.log('show Promise 3', resolve);
          return this.testPromise(resolve)
        })
        .catch(error => {
          console.log('show Promise 4', error);
        })
    }

     testPromise(time){
      return new Promise((resolve,reject)=>{
        if(time >5000){
            reject(new Error('5초가 넘으면 안되!!!!!'))
        }
        setTimeout(()=>{
          resolve(time);
       },time);
      })
    }