JavaScript에서 async/await를 사용하여 콜백 함수를 Promise로 변환하려면 어떻게 해야 합니까?

async/await를 사용하여 콜백 함수를 Promise로 변환

JavaScript에서는 특정 이벤트가 발생할 때까지 코드 실행을 지연하는 기능이 일반적인 요구 사항입니다. 비동기 코드로 작업할 때 콜백은 JavaScript의 전통적인 접근 방식이었지만 Promise는 비동기 작업을 처리하는 보다 간결하고 유연한 방법을 제공합니다. Promise를 사용하면 작업 연결 및 대기가 가능해 비동기 코드가 단순화되고 가독성이 향상됩니다.

문제

URL에서 이미지를 가져와서 로드하고 너비와 너비를 반환하는 다음 함수를 고려해 보세요. height:

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

이 함수를 콜백으로 사용하면 이미지 데이터에 즉시 액세스하려고 할 때 문제가 발생할 수 있습니다. 예를 들어 다음과 같이 함수를 사용하면

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

getImageData 함수는 바로 실행되지만 이미지 로드가 완료되지 않아 정의되지 않은 출력이 발생할 수 있습니다. 이 문제를 극복하기 위해 promise와 async/await를 활용하여 이미지가 성공적으로 로드된 후에만 이미지 데이터가 검색되도록 할 수 있습니다.

해결책

콜백에 의존하는 대신 다음을 수행할 수 있습니다. getImageData를 약속 기반 함수로 변환:

<code class="js">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Don't forget to handle errors
    img.src = url;
  });
}</code>

이제 이미지 데이터가 사용 가능해졌을 때만 async/await를 사용하여 이미지 데이터를 검색할 수 있습니다.

<code class="js">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와 async/await를 사용하면 이미지가 로드된 후에만 이미지 데이터에 액세스할 수 있으므로 비동기 작업 처리에 대한 보다 강력하고 깔끔한 접근 방식을 제공할 수 있습니다.

위 내용은 JavaScript에서 async/await를 사용하여 콜백 함수를 Promise로 변환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!