비동기 JavaScript: 약속, Async/Await 및 콜백

원래 Makemychance.com에 게시됨

비동기 프로그래밍은 JavaScript의 핵심 개념으로, 다른 코드의 실행을 차단하지 않고 작업을 수행할 수 있게 해줍니다. 이는 네트워크 요청, 파일 I/O 또는 타이머와 같이 완료하는 데 시간이 걸리는 작업을 처리할 때 특히 중요합니다. 이 기사에서는 JavaScript에서 비동기 코드를 처리하는 세 가지 주요 기술인 콜백, 약속 및 Async/Await를 살펴보겠습니다.

1. 콜백

콜백은 JavaScript에서 비동기 작업을 처리하는 가장 오래된 방법입니다. 콜백은 단순히 다른 함수에 인수로 전달된 함수로, 작업 완료 후 실행됩니다.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});

위 예에서 fetchData는 setTimeout을 사용하여 네트워크 요청을 시뮬레이션하고 콜백 함수는 요청이 완료된 후 메시지를 기록합니다.

콜백 지옥

콜백 사용의 단점 중 하나는 여러 개의 중첩된 콜백으로 인해 코드를 읽고 유지하기 어렵게 만드는 악명 높은 "콜백 지옥" 또는 "파멸의 피라미드"입니다.

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. 약속

ES6에 도입된 Promise는 비동기 작업 처리에 대한 보다 깔끔한 접근 방식을 제공하여 깊게 중첩된 콜백 문제를 극복하는 데 도움이 됩니다. 기본적으로 Promise는 비동기 작업의 성공 여부에 관계없이 결과를 상징하는 개체이며, 결과 값을 처리하는 구조화된 방법을 제공합니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

이 예에서 fetchData는 약속을 반환합니다. .then() 메서드는 Promise의 해결된 값을 처리하는 데 사용되고, .catch()는 오류를 처리하는 데 사용됩니다.

약속을 연결하다

Promise를 연결하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다.

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. 비동기/대기

ES8(2017)에 도입된 Async/Await는 Promise 위에 구축된 구문 설탕으로, 비동기 코드를 동기 코드처럼 보이고 동작하게 만듭니다.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

이 예에서 processData 함수는 wait 키워드를 사용하여 fetchData에서 반환된 Promise가 해결될 때까지 기다립니다. 이는 Promise Chaining에 비해 코드를 훨씬 더 깔끔하고 따라하기 쉽게 만듭니다.

오류 처리

async/await의 오류 처리는 try...catch 블록을 사용하여 수행되며, .catch() 메서드 없이도 오류를 처리할 수 있는 간단한 방법을 제공합니다.

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

위 내용은 비동기 JavaScript: 약속, Async/Await 및 콜백의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!