비동기 프로그래밍 콜백, 약속 및 비동기 대기

WBOY
풀어 주다: 2024-09-11 06:43:02
원래의
1090명이 탐색했습니다.

Asynchronous programming Callbacks, Promises & Async Await

JavaScript의 비동기 프로그래밍을 사용하면 다른 코드 실행을 차단하지 않고 API 호출, 파일 읽기, 데이터베이스 쿼리와 같은 작업을 수행할 수 있습니다. 이는 JavaScript, 특히 응답성과 성능이 중요한 웹 개발에서 매우 중요합니다.

주요 개념

1. 콜백:

비동기 작업이 완료된 후 실행되는 다른 함수에 인수로 전달되는 함수입니다.

예:

함수 fetchData(콜백) {
setTimeout(() => {
callback("데이터를 가져왔습니다");
}, 1000);
}

fetchData((데이터) => {
console.log(데이터);
});

2. 약속:

비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.

Promise는 보류, 이행, 거부의 세 가지 상태 중 하나일 수 있습니다.

예:

let promise = new Promise((해결, 거부) => {
setTimeout(() => {
해결("데이터를 가져왔습니다");
}, 1000);
});

약속
.then((데이터) => console.log(데이터))
.catch((오류) => console.log(오류));

3. 비동기 및 대기:

비동기 함수는 자동으로 Promise를 반환하며 Promise 처리를 단순화하는 데 사용됩니다.

await는 Promise가 해결될 때까지 비동기 함수의 실행을 일시 중지하여 코드를 더 쉽게 읽고 쓸 수 있도록 합니다.

예:

비동기 함수 fetchData() {
시도해보세요 {
데이터 = 새 약속 기다리기((해결, 거부) => {
setTimeout(() => {
해결("데이터를 가져왔습니다");
}, 1000);
});
console.log(데이터);
} 잡기(오류) {
console.log(오류);
}
}

fetchData();

비동기 패턴

콜백 지옥: 콜백이 다른 콜백 내에 중첩되어 코드를 읽고 유지하기 어렵게 만드는 상황입니다.

Promise Chaining: Promise를 반환하고 .then() 및 .catch() 메서드를 연결하여 콜백 지옥을 피하는 패턴입니다.

비동기/대기: 비동기 코드 작성에 대한 보다 현대적이고 깔끔한 접근 방식으로 약속 체이닝을 피하고 코드를 더욱 동기식으로 만듭니다.

사용 사례

API 호출: 서버에서 데이터를 가져옵니다.

타이머: setTimeout 또는 setInterval 사용

파일 작업: 비차단 방식으로 파일을 읽거나 씁니다.

이벤트 처리: 클릭, 키 누르기 등과 같은 이벤트 처리

JavaScript의 비동기 프로그래밍은 특히 I/O 바인딩 작업을 처리할 때 응답성이 뛰어나고 효율적인 애플리케이션을 구축하는 데 필수적입니다.

위 내용은 비동기 프로그래밍 콜백, 약속 및 비동기 대기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿