callback hell, Promise

함수안에 인자로 함수를 넣어주는걸 반복하는걸 callback 

 

다섯번째 걸쳐서 1초마다 1씩 더해주는 코드를 setTimeout으로 구현하기 위해서는 해당과 같은 작업을 해야한다 

function increaseAndPrint(n, callback) {
  setTimeout(() => {
    const increased = n + 1;
    console.log(increased);
    if (callback) {
      callback(increased);
    }
  }, 1000);
}

increaseAndPrint(0, n => {
  increaseAndPrint(n, n => {
    increaseAndPrint(n, n => {
      increaseAndPrint(n, n => {
        increaseAndPrint(n, n => {
          console.log('끝!');
        });
      });
    });
  });
});

 

이러한 복잡한 코드를 callback hell 이라고 한다

 

이를 해결하기위해서 Promise가 등장했다

 

const myPromise = new Promise((resolve, reject) => {
  // 구현..
})

 

promise는 성공시 resolve를 호출, 실패할때는 reject를 호출한다.

 

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

myPromise.then(n => {
  console.log(n);
});

resolve를 호출할때 특정값을 파라미터로 넣어주면 이 값을 작업이 끝나고도 사용할수 있다.

해당값은 .then을 붙여서 활용한다

 

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

myPromise
  .then(n => {
    console.log(n);
  })
  .catch(error => {
    console.log(error);
  });

 위의 코드는 1초뒤에 실패되는 코드다 .then은 성공시 사용하고 reject는 실패시 .catch 를통해 수행할 작업을 설정 할 수 있다.

 

 

Promise는 then내부에서 넣은 함수에서 또 Promise를 리턴하면 연달아서 사용할 수 있다

 

resolve 안에 값을 저장시키고 해당값을 리턴해서 계속 반복해서 사용(then에서 연속 사용)

function increaseAndPrint(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5) {
        const error = new Error();
        error.name = 'ValueIsFiveError';
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0)
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .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 = 'ValueIsFiveError';
        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);
  });