Promise

콜백지옥(callback hell)

콜백 지옥(callback hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상을 말한다. 주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데, 가독성이 떨어지면서 코드의 유지보수가 힘들어진다.

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

이러한 지옥을 극복하기 위해 promise, async/await를 사용하게 된다.

Promise

콜백함수로 처리하던 구조에서 프로미스로 바꿀수 있는데
new Promise() 프로미스를 생성하고 종료 될때까지 3가지 상태를 갖는다.

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

const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (//비동기 작업 수행 성공 //) {
    resolve('성공');
  }
  else { // 비동기 작업 수행 실패 //
    reject('실패');
  }
});

위에 예시처럼 promise를 쓸 수 있는데 resolve는 성공했을때 reject는 실패,오류등을 호출한다.

.then

const promise = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve("resolve");
  }, 3000);
});

promise.then(value => console.log(value));
// 3초 후에 결과가 출력
// resolve

promise 가 종료가 되면 resolve 에 들어간 값을 받을 수 있다.

promise.all()

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

만약에 여러가지 작업을 동시에 병렬로 처리하고 싶다면 Promise.all을 사용할 수 있다.
내가 처리하고자 하는 프로미스들을 배열로 담아 Promise.all에 인자로 전달하면 배열에 있는 모든 프로미스들이 거의 동시에 트리거된다.