비동기 프로그래밍은 개발자가 메인 스레드를 차단하지 않고 긴 네트워크 요청, 파일 작업 및 기타 시간이 많이 걸리는 작업을 수행할 수 있게 해주는 JavaScript의 핵심 측면입니다. 이를 통해 애플리케이션의 반응성과 사용자 친화적인 상태를 유지할 수 있습니다. JavaScript는 비동기 작업을 처리하는 세 가지 주요 방법인 콜백, 약속 및 비동기/대기를 제공합니다. 이 글에서는 자세한 예제를 통해 이러한 각 방법을 자세히 살펴보고 해당 구문, 사용법 및 차이점을 살펴보겠습니다.
JavaScript에서는 서버에서 데이터 가져오기, 파일 읽기, 계산 수행 등 완료하는 데 시간이 걸리는 작업을 비동기식으로 처리할 수 있습니다. 이는 작업이 완료되기를 기다리는 동안 JavaScript 엔진이 다른 작업을 계속 실행할 수 있음을 의미합니다. 이는 웹 애플리케이션에서 효율적이고 원활한 사용자 경험을 만드는 데 중요합니다.
콜백은 JavaScript에서 비동기 작업을 처리하는 가장 초기 방법 중 하나입니다. 콜백은 단순히 비동기 작업이 완료되면 실행되는 다른 함수에 인수로 전달되는 함수입니다.
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched!");
}, 1000);
}
function displayData(data) {
console.log(data);
}
fetchData(displayData);
위의 예에서 fetchData는 setTimeout을 사용하여 비동기 작업을 시뮬레이션합니다. 1초 후에는 displayData 함수를 호출하여 가져온 데이터를 인수로 전달합니다.
장점:
단점:
콜백과 관련된 문제를 해결하기 위해 ES6(ECMAScript 2015)에 Promise가 도입되었습니다. Promise는 아직 완료되지 않았지만 앞으로 예상되는 작업을 나타냅니다. 보류, 이행 또는 거부의 세 가지 상태 중 하나일 수 있습니다.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched!");
}, 1000);
});
}
fetchData()
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Error:", error);
});
이 예에서 fetchData는 "Data fetched!"로 해결되는 Promise를 반환합니다. 1초 후. then 메소드는 해결된 값을 처리하는 데 사용되고, catch는 오류를 처리하는 데 사용됩니다.
Promise를 연결하여 일련의 비동기 작업을 순차적으로 수행할 수 있습니다.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched!");
}, 1000);
});
}
function processData(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${data} Processed!`);
}, 1000);
});
}
fetchData()
.then(data => {
console.log(data);
return processData(data);
})
.then(processedData => {
console.log(processedData);
})
.catch(error => {
console.error("Error:", error);
});
이 예에서는 fetchData 다음에 processData가 호출되고 그 결과는 then을 사용하여 순차적으로 처리됩니다.
장점:
단점:
ES2017에 도입된 Async/Await는 Promises를 사용하여 비동기 코드를 작성하는 더 읽기 쉽고 간결한 방법을 제공합니다. async 키워드는 비동기 함수를 정의하는 데 사용되며, wait 키워드는 Promise가 해결될 때까지 실행을 일시 중지하는 데 사용됩니다.
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched!");
}, 1000);
});
}
async function displayData() {
const data = await fetchData();
console.log(data);
}
displayData();
이 예에서 displayData는 데이터를 로깅하기 전에 fetchData가 완료될 때까지 기다리는 비동기 함수입니다.
Async/Await 오류 처리는 try/catch 블록을 사용하여 수행할 수 있습니다.
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("Failed to fetch data!");
}, 1000);
});
}
async function displayData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error("Error:", error);
}
}
displayData();
여기서 fetchData가 실패하면 catch 블록에 의해 오류가 포착되어 기록됩니다.
장점:
단점:
JavaScript의 비동기 프로그래밍은 반응성이 뛰어나고 효율적인 애플리케이션을 구축하는 데 필수적입니다. 콜백, 약속 및 Async/Await의 차이점을 이해하면 개발자는 특정 사용 사례에 적합한 도구를 선택할 수 있습니다. 콜백은 비동기 작업을 처리하는 가장 간단한 형태이지만 코드가 지저분해질 수 있습니다. Promise는 보다 구조화된 접근 방식을 제공하지만 Async/Await는 가장 우아하고 읽기 쉬운 솔루션을 제공합니다. 모범 사례를 따르고 이러한 도구를 이해함으로써 개발자는 깔끔하고 유지 관리가 가능하며 효율적인 비동기 코드를 작성할 수 있습니다.
위 내용은 JavaScript의 비동기 프로그래밍: 콜백 vs 약속 vs 비동기/대기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
