>  기사  >  웹 프론트엔드  >  비동기식

비동기식

王林
王林원래의
2024-09-11 06:36:371048검색

JavaScript의

비동기식

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

주요 개념

1. 콜백:

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

예:

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched");
    }, 1000);
}

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

2. 약속:

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

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

예:

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data fetched");
    }, 1000);
});

promise
    .then((data) => console.log(data))
    .catch((error) => console.log(error));

3. 비동기 및 대기:

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

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

예:

async function fetchData() {
    try {
        let data = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("Data fetched");
            }, 1000);
        });
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

fetchData();

비동기 패턴

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

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

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

사용 사례

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

타이머: setTimeout 또는 setInterval 사용

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

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

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

위 내용은 비동기식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.