[JavaScript] 비동기 처리(Promise)

비동기 작업을 조금 더 편하게 처리 할 수 있도록 도입된 기능이다.

콜백 함수로 처리를 하게 된다면 비동기 작업이 많아진 경우 코드가 난잡해진다.

 

숫자 n을 파라미터로 받아와서 다섯번에 걸쳐 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('끝!');
        });
      });
    });
  });
});

매우 복잡하다. 이를 콜백지옥이라고 부른다.

 

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);
});

위의 코드는 1초 뒤에 성공하는 상황에 대해서만 구현한 코드이다.

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

작업이 끝나고 또 다른 작업을 해야 할 때는 Promise 뒤에 .then(...)을 붙여서 사용한다.

 

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

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

위의 코드는 실패할 때 reject를 사용하고 .catch를 통해 실패했을시 수행할 작업을 설정한다.

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) => {
  console.log('result: ', n);
})

위에만 보면 결국 함수를 전달하는 것과 같이 다른게 없어보인다.

하지만 Promise 속성 중에는 만약 then 내부에 넣은 함수에서 또 Promise를 리턴하게 되면 연달아서 사용할 수 있다.

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);
  });