[JavaScript] 프라미스화 Promisfication

1. 프라미스화란?

-> callback을 받는 함수를 promise를 반환하는 함수로 바꾸는 것을 '프라미스화(promisfication)'라고 한다.

(기능을 구현하다 보면  콜백보다는 프로미스가 더 편리하기 때문에 콜백 기반 함수와 라이브러리를 프로미스를 반환하는 함수로 바꾸는 게 좋은 경우가 종종생기기 때문!!)

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`${src}를 불러오는 도중에 에러가 발생함`));

  document.head.append(script);
}

// 새로 생성할 script라는 태그의 로딩이 끝나면 실행하는 callback함수를 나타내는 코드

위의 코드를 아래와 같이 프로미스화 할 수 있다.

let loadScriptPromise = function(src) {
  return new Promise((resolve, reject) => {
    loadScript(src, (err, script) => {
      if (err) reject(err)
      else resolve(script);
    });
  })
}

새로운 함수 loadScriptPromise(src)는 loadScript와 동일하게 동작하지만 callblack을 제외한 src만 인수로 받고, Promise를 반환한다.

loadScriptPromise는 기존함수 loadScript에 모든 일을 위임한다. 그리고 loadScript의 콜백은 스크립트 로딩 상태에 따라 resolve 혹은 reject상태의 Promise를 반환한다.