JavaScript의 비동기 프로그래밍: 콜백 vs 약속 vs 비동기/대기-JS 튜토리얼-php.cn

JavaScript의 비동기 프로그래밍: 콜백 vs 약속 vs 비동기/대기

王林

풀어 주다： 2024-07-17 20:13:12

원래의

1071명이 탐색했습니다.

Asynchronous Programming in JavaScript: Callbacks vs Promises vs Async/Await

비동기 프로그래밍은 개발자가 메인 스레드를 차단하지 않고 긴 네트워크 요청, 파일 작업 및 기타 시간이 많이 걸리는 작업을 수행할 수 있게 해주는 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을 사용하여 순차적으로 처리됩니다.

장점과 단점

장점:

비동기 작업 연결을 허용하여 콜백 지옥을 방지합니다.
캐치 기능이 내장된 오류 처리 기능을 제공합니다.
코드 가독성과 유지 관리성이 향상됩니다.

단점:

여러 중첩된 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 블록에 의해 오류가 포착되어 기록됩니다.

장점과 단점

장점:

비동기 코드를 단순화하여 동기 코드처럼 보이게 만듭니다.
코드 가독성과 유지관리성이 향상됩니다.
try/catch 블록을 사용하여 오류 처리를 단순화합니다.

단점:

Async/Await가 Promise 위에 구축되므로 Promise에 대한 이해가 필요합니다.
아직 비교적 새로운 기능이므로 일부 환경에서는 완전히 지원되지 않을 수 있습니다.

비교 및 모범 사례

비교

콜백: 간단한 단일 수준 비동기 작업에 적합하지만 복잡한 시나리오에서는 콜백 지옥으로 이어질 수 있습니다.
약속: 가독성과 관리 용이성을 향상하여 비동기 작업 연결을 허용합니다. catch를 사용한 오류 처리 기능이 내장되어 있습니다.
Async/Await: 비동기 코드를 작성하는 가장 읽기 쉽고 유지 관리 가능한 방법을 제공합니다. 오류 처리를 단순화하고 동기 코드처럼 보입니다.

모범 사례

비동기 작업을 처리해야 하는 대부분의 시나리오에서는 비동기/대기를 사용하세요. 최고의 가독성과 단순성을 제공합니다.
Promise를 사용하세요 여러 비동기 작업을 순차적으로 수행해야 하거나 Promise를 반환하는 라이브러리를 사용할 때.
콜백을 피하세요 레거시 코드를 사용하거나 매우 간단한 비동기 작업을 처리하는 경우가 아니면

결론

JavaScript의 비동기 프로그래밍은 반응성이 뛰어나고 효율적인 애플리케이션을 구축하는 데 필수적입니다. 콜백, 약속 및 Async/Await의 차이점을 이해하면 개발자는 특정 사용 사례에 적합한 도구를 선택할 수 있습니다. 콜백은 비동기 작업을 처리하는 가장 간단한 형태이지만 코드가 지저분해질 수 있습니다. Promise는 보다 구조화된 접근 방식을 제공하지만 Async/Await는 가장 우아하고 읽기 쉬운 솔루션을 제공합니다. 모범 사례를 따르고 이러한 도구를 이해함으로써 개발자는 깔끔하고 유지 관리가 가능하며 효율적인 비동기 코드를 작성할 수 있습니다.

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