JavaScript에서 async/await를 사용하여 콜백 기반 함수를 약속 기반 함수로 어떻게 변환할 수 있나요?

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

JavaScript에서 콜백은 비동기 작업을 처리하는 일반적인 접근 방식입니다. 그러나 콜백을 사용하면 코드를 읽고 유지 관리하기 어려울 수 있습니다. Async/await는 비동기 코드로 작업하는 보다 간단한 방법을 제공하는 새로운 기능입니다.

async/await의 주요 이점 중 하나는 Promise가 해결될 때까지 함수 실행을 일시 중지할 수 있다는 것입니다. 이를 통해 특히 여러 비동기 작업을 처리할 때 읽고 유지하기 쉬운 코드를 작성할 수 있습니다.

문제 설명

차원을 검색하는 다음 함수를 고려하세요. 콜백을 사용하여 특정 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>

콜백이 실행될 때 이미지가 아직 로드되지 않았기 때문에 정의되지 않은 상태가 됩니다.

Async/ 사용 Await

이 문제를 해결하려면 async/await를 사용하여 getImageData 함수를 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 gracefully
    img.src = url;
  });
}

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를 반환하는 loadImage 함수를 생성합니다. 이 Promise는 이미지 로드가 완료되면 해결되거나 오류가 있는 경우 거부됩니다.

다음으로 이미지 크기를 반환하기 전에 loadImage에서 반환된 Promise가 해결될 때까지 기다리는 async/await를 사용하는 getImageData 함수를 생성합니다.

마지막으로 async/await를 사용하여 Ready 함수에서 getImageData 함수를 호출할 수 있습니다. 이렇게 하면 준비 함수가 이미지가 로드된 후에만 이미지 크기를 기록합니다.

async/await를 사용하면 비동기 작업과 관련된 코드를 단순화하고 읽기 및 유지 관리를 더 쉽게 만들 수 있습니다.

위 내용은 JavaScript에서 async/await를 사용하여 콜백 기반 함수를 약속 기반 함수로 어떻게 변환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!