Async/Await를 사용하여 콜백 기반 함수에서 이미지 크기를 안전하게 검색하려면 어떻게 해야 합니까?

Async/Await를 사용하여 콜백에서 약속 만들기

제공된 함수 getImageData는 콜백을 활용하여 로드 시 이미지 크기를 검색합니다. 그러나 JavaScript의 동기적 특성으로 인해 해당 속성에 액세스하기 전에 이미지가 완전히 로드되지 않으면 정의되지 않은 값이 발생할 수 있습니다.

이 문제를 해결하기 위해 우리는 promise와 async/await를 활용하여 너비와 너비의 가용성을 보장할 수 있습니다.

콜백을 Promise로 변환

첫 번째 단계는 getImageData 함수를 Promise로 변환하는 것입니다. 이는 Promise 생성자를 사용하여 달성할 수 있습니다.

<code class="javascript">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Handle errors
    img.src = url;
  });
}</code>

Async/Await 활용

loadImage 함수를 promise로 사용하여 async/await를 사용하여 보장할 수 있습니다. 이미지는 해당 크기에 액세스하기 전에 로드됩니다.

<code class="javascript">async function getImageData(url) {
  const img = await loadImage(url);
  return { width: img.naturalWidth, height: img.naturalHeight };
}
async function ready() {
  console.log(await getImageData(this.url))
}</code>

이 버전은 이미지 로드가 완료된 경우에만 이미지 크기로 해결되는 Promise를 반환합니다. 이제 Ready 함수는 정의되지 않은 값을 만나지 않고도 이러한 차원을 기록할 수 있습니다.

위 내용은 Async/Await를 사용하여 콜백 기반 함수에서 이미지 크기를 안전하게 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!