Async/Await를 사용하여 콜백 기반 이미지 로딩 함수를 동기 이미지 데이터 액세스를 위한 약속 기반 접근 방식으로 변환하려면 어떻게 해야 합니까?

Async/Await를 사용하여 콜백을 Promise로 변환

JavaScript에서 다음 함수는 URL에서 이미지 데이터를 검색합니다.

<code class="javascript">function getImageData(url) {
  const img = new Image();
  img.addEventListener('load', function() {
    return { width: this.naturalWidth, height: this.naturalHeight };
  });
  img.src = url;
}</code>

이 함수는 콜백 방식을 사용하지만, 이미지 데이터에 동기적으로 접근하려고 할 때 한계가 있습니다. 다음과 같이 준비된 메소드 내에서 getImageData를 호출하는 경우:

<code class="javascript">ready() {
  console.log(getImageData(this.url));
}</code>

이미지가 아직 로드되지 않았기 때문에 undefound를 얻게 됩니다. 따라서 이미지 데이터에 액세스하기 전에 비동기 기술을 활용하여 이미지 로드 작업을 처리해야 합니다.

이를 달성하려면 다음과 같이 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 error cases as well
    img.src = url;
  });
}</code>

이제 , async/await를 사용하여 loadImage 약속을 기다린 후 이미지 데이터를 검색할 수 있습니다.

<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>

이 수정된 구현에서 async/await는 loadImage 약속이 해결될 때까지 코드가 일시 중지되도록 보장합니다. 이미지 데이터는 로깅 시점에 확인 가능합니다.

위 내용은 Async/Await를 사용하여 콜백 기반 이미지 로딩 함수를 동기 이미지 데이터 액세스를 위한 약속 기반 접근 방식으로 변환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!