javascript - promise

Javascript의 promise 사용 예(example)

function removeUpload() {
  init().then(() => {
    console.log("End of Model Loading");
    predict();
  });
}

async function init() {
  const modelURL = URL + "model.json";
  const metadataURL = URL + "metadata.json";
  model = await tmImage.load(modelURL, metadataURL);
  maxPredictions = model.getTotalClasses();
}

async function predict() {
  var image = document.getElementById("face-image")
  const prediction = await model.predict(image, false);
  for (let i = 0; i < maxPredictions; i++) {
    const classPrediction =
          prediction[i].className + ": " + prediction[i].probability.toFixed(2);
    labelContainer.childNodes[i].innerHTML = classPrediction;
  }
}

init() 함수에 모델을 로드하는 코드가 포함되어 있다. 모델을 로드하는데는 시간이 좀 걸리는데 예측을 수행하는 predict() 함수가 모델을 불러오기 전에 실행될 경우 에러가 발생한다.

이때 javascript의 promise 개념을 적용하면 위와 문제를 해결할 수 있다.

코드로 원리를 설명하면 init() 함수 내 async와 await 키워드를 사용하면 then()을 사용할 수 있는데 이는 "init() 함수 내의 코드가 모두 실행된 후에 ~ (코드가 다 실행될때까지 기다려)" 정도로 이해하면 될 것 같다.

then()에서 () => {}는 ES6 문법을 사용한 익명함수(이름없이 선언과 동시에 함수 실행)이다. ES6 이전 문법을 적용한다면 아래와 같이 표현 가능하다.

function removeUpload() {
  init().then(function() {
    console.log("End of Model Loading");
    predict();
  });
}