async/await를 사용하여 이미지 로딩 콜백을 약속으로 변환하는 방법은 무엇입니까?

async/await를 사용하여 콜백을 약속으로 변환

콜백은 비동기 코드를 처리하는 편리한 방법을 제공합니다. 그러나 async/await와 함께 promise를 사용하면 코드 가독성과 유지 관리 측면에서 이점을 제공할 수 있습니다. 이 질문은 이미지의 너비와 높이를 로드하는 콜백 함수를 약속 기반 구현으로 변환하는 문제를 해결합니다.

문제 및 해결 방법

제공된 콜백 함수인 getImageData는 기본 너비를 반환합니다. 로드가 완료되면 이미지의 높이. 그러나 예시와 같이 비동기식으로 호출할 경우:

ready () {
  console.log(getImageData(this.url))
}

콜백은 즉시 실행되고 이미지를 로드하는 데 시간이 걸리기 때문에 반환된 값은 정의되지 않습니다. 이 문제를 극복하기 위해 Promise 생성자를 사용하여 이미지가 로드되면 해결되는 Promise를 생성할 수 있습니다. 업데이트된 getImageData 함수는 다음과 같습니다.

function getImageData(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    });
    img.addEventListener('error', reject); // Handle errors here
    img.src = url;
  });
}

이 Promise 기반 함수를 사용하면 이제 async/await를 사용하여 getImageData의 실행을 지연하고 로드된 이미지의 실제 너비와 높이를 얻을 수 있습니다.

async function ready() {
  const imageData = await getImageData(this.url);
  console.log(imageData);
}

이 코드는 이미지가 완전히 로드되고 너비와 높이를 사용할 수 있는 후에만 콘솔 로깅이 발생하도록 보장합니다.

위 내용은 async/await를 사용하여 이미지 로딩 콜백을 약속으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!