콜백 지옥, 더욱 깔끔한 비동기 JavaScript 작성

상당한 시간 동안 JavaScript를 사용했다면 "콜백 지옥"을 접했을 것입니다. 중첩된 콜백이 뒤엉켜 코드를 읽기 어렵고 유지 관리도 더욱 어렵게 만드는 것입니다. 하지만 좋은 소식이 있습니다. 올바른 도구와 패턴을 사용하면 콜백 지옥을 완전히 피하고 깔끔하고 효율적인 비동기 코드를 작성할 수 있습니다. 방법을 살펴보겠습니다.

약속: 비동기 코드를 정리하는 첫 번째 단계

Promise는 JavaScript에서 비동기 작업을 처리하는 보다 구조화된 방법이며 깊게 중첩된 콜백을 제거하는 데 도움이 됩니다. 함수를 인수로 전달하고 중첩하는 대신 Promises를 사용하면 .then() 및 .catch() 메서드를 사용하여 작업을 연결할 수 있습니다. 이렇게 하면 코드가 선형으로 유지되고 훨씬 쉽게 따라갈 수 있습니다.
예:

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

이 약속 기반 접근 방식에서는 각 단계가 명확하고 선형적인 방식으로 이전 단계를 따르므로 코드 흐름을 더 쉽게 추적하고 필요한 경우 디버그할 수 있습니다.

비동기/대기: 최신 솔루션

Promise는 중첩된 콜백을 정리하는 데는 좋지만 여러 비동기 작업을 처리할 때는 여전히 번거로울 수 있습니다. async를 입력하고 기다립니다. 이러한 최신 JavaScript 기능을 사용하면 거의 동기 코드처럼 보이는 비동기 코드를 작성할 수 있어 가독성과 유지 관리성이 향상됩니다.
예:

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

async/await를 사용하면 특히 동기 코드 작성에 익숙한 개발자의 경우 훨씬 더 직관적인 방식으로 Promise를 처리할 수 있습니다. .then() 체인이 필요하지 않으며 코드가 위에서 아래로 간단하게 유지됩니다.

대규모 작업을 작은 기능으로 나누기

콜백 지옥을 피하는 또 다른 강력한 기술은 크고 복잡한 작업을 더 작고 재사용 가능한 함수로 나누는 것입니다. 이 모듈식 접근 방식은 가독성을 향상시킬 뿐만 아니라 코드 디버깅 및 유지 관리도 더 쉽게 만듭니다.

예를 들어 API에서 데이터를 가져와 처리해야 하는 경우 모든 것을 하나의 큰 함수에 작성하는 대신 다음과 같이 분류할 수 있습니다.

예:

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    return await response.json();
}

async function processData(data) {
    // Process your data here
    return data.map(item => item.name);
}

async function main() {
    try {
        const data = await fetchData();
        const processedData = await processData(data);
        console.log('Processed Data:', processedData);
    } catch (error) {
        console.error('An error occurred:', error);
    }
}

main();

데이터를 가져오고 처리하는 작업을 자체 함수로 분리하면 코드를 훨씬 더 쉽게 읽을 수 있고 유지 관리할 수 있습니다.

오류를 적절하게 처리하기

비동기 코드의 주요 과제 중 하나는 오류 처리입니다. 깊게 중첩된 콜백 구조에서는 오류를 적절하게 포착하고 처리하는 것이 까다로울 수 있습니다. Promise를 사용하면 작업이 끝날 때 .catch()를 연결할 수 있습니다. 그러나 try-catch 블록과 결합된 async/await는 오류를 처리하는 더 자연스럽고 읽기 쉬운 방법을 제공합니다.

예:

async function riskyOperation() {
    try {
        const result = await someAsyncTask();
        console.log('Result:', result);
    } catch (error) {
        console.error('Something went wrong:', error);
    }
}

riskyOperation();

이렇게 하면 비동기 코드의 특정 부분 내에서 오류를 찾아 명확하고 관리하기 쉽게 유지하고 오류가 눈에 띄지 않게 빠져나가는 일이 없도록 할 수 있습니다.

여러 비동기 작업 관리

때때로 여러 비동기 작업을 동시에 관리해야 하는 경우가 있습니다. Promise.all()은 일반적으로 사용되지만 하나의 Promise가 실패하면 실행을 중지합니다. 이러한 경우 Promise.allSettled()가 구출됩니다. 이는 모든 Promise가 해결(해결 또는 거부)될 때까지 기다리고 결과를 반환합니다.

예:

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

무거운 작업을 위해 웹 작업자 사용

이미지 처리나 데이터 처리와 같이 CPU를 많이 사용하는 작업의 경우 JavaScript의 단일 스레드 특성으로 인해 애플리케이션이 정지될 수 있습니다. 이것이 바로 Web Workers가 빛을 발하는 부분입니다. Web Worker를 사용하면 메인 스레드를 차단하지 않고 백그라운드에서 작업을 실행하고 UI의 응답성을 유지할 수 있습니다.

예:

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

과중한 작업을 Web Workers에 오프로드함으로써 메인 스레드는 UI 상호 작용 및 기타 중요한 기능을 자유롭게 처리하여 보다 원활한 사용자 경험을 보장합니다.

이 모든 것을 고려하면

콜백 지옥을 피하고 깔끔한 비동기 JavaScript를 작성하는 것은 코드를 더 읽기 쉽고 유지 관리하기 쉽고 효율적으로 만드는 것입니다. Promise를 사용하든, async/await를 사용하든, 코드를 모듈화하든, Web Workers를 활용하든 목표는 동일합니다. 즉, 코드를 단순하고 체계적으로 유지하는 것입니다. 그렇게 하면 악몽 같은 디버깅을 피할 수 있을 뿐만 아니라 다른 사람(또는 미래의 여러분!)이 감사할 코드를 작성할 수도 있습니다.

---

내 웹사이트: https://Shafayet.zya.me

---

당신을 위한 밈이요?

위 내용은 콜백 지옥, 더욱 깔끔한 비동기 JavaScript 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!