비동기 JavaScript 마스터하기: 콜백, 약속 및 단순화된 Async/Await

비동기 JavaScript: 콜백에서 Promise 및 Async/Await까지

소개

JavaScript는 웹 개발에 널리 사용되는 강력한 단일 스레드 프로그래밍 언어입니다. JavaScript의 일반적인 과제는 메인 스레드를 차단하지 않고 API에서 데이터를 가져오거나 시간에 민감한 작업을 수행하는 등의 비동기 작업을 처리하는 것입니다. 시간이 지남에 따라 개발자는 콜백 사용에서 약속으로 전환했으며 이제 비동기 작업을 관리하기 위해 더 우아한 async/await 구문을 사용했습니다. 이 가이드에서는 이러한 개념을 기본부터 시작하여 고급 시나리오까지 단계별로 안내합니다. 결국에는 실제 애플리케이션에서 비동기 JavaScript를 자신있게 사용할 수 있게 될 것입니다.

---

비동기 프로그래밍이란 무엇입니까?

JavaScript에서는 서버에서 데이터 가져오기, 파일 읽기, 시간 초과 설정과 같은 작업을 완료하는 데 시간이 걸릴 수 있습니다. 이러한 작업이 완료될 때까지 기다리는 대신(이로 인해 나머지 프로그램의 실행이 차단됨) JavaScript는 이러한 작업이 비동기적으로 실행되도록 허용합니다. 즉, 기본 프로그램 흐름과 독립적으로 처리되므로 다른 코드가 지연 없이 실행될 수 있습니다.

---

콜백 이해: 시작점

콜백이란 무엇입니까?

콜백은 다른 함수에 인수로 전달되는 함수입니다. 첫 번째 함수가 작업을 완료하면 콜백 함수를 실행하여 완료 신호를 보냅니다.

콜백 예: 기본 사항 이해

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

설명:

1. fetchData는 지연된 데이터 가져오기를 시뮬레이션합니다.
2. 지연 후 콜백 함수(processData)를 실행하여 데이터가 준비되었음을 나타냅니다.

---

콜백 지옥: 문제

중첩된 콜백을 사용하여 여러 비동기 작업을 처리하면 코드를 읽을 수 없고 유지 관리가 어려워질 수 있습니다.

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

이 "파멸의 피라미드"는 코드 디버깅과 유지 관리를 어렵게 만듭니다.

---

약속: 더 나은 대안

약속이란 무엇입니까?

promise는 현재, 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타내는 개체입니다. 약속에는 세 가지 상태가 있습니다:

• 보류 중: 이행되거나 거부되지 않은 초기 상태입니다.
• 완료: 작업이 성공적으로 완료되었습니다.
• 거부됨: 작업이 실패했습니다.

약속의 예: 콜백 지옥 재작성

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

약속의 이점

1. 체인 연결로 가독성이 향상되었습니다.
2. .catch()를 사용하여 오류 처리 기능이 내장되어 있습니다.
3. 깊게 중첩된 콜백을 방지합니다.

---

비동기/대기: 현대적인 우아함

비동기/대기란 무엇입니까?

async/await는 ES2017에 도입된 Promise에 대한 추가 구문입니다. 비동기식 코드를 동기식으로 보이게 하여 가독성과 유지 관리성을 향상시킵니다.

Async/Await 예: 약속 단순화

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

작동 방식

1. 비동기 키워드: 함수를 비동기로 선언합니다.
2. await 키워드: Promise가 해결되거나 거부될 때까지 함수 실행을 일시 중지합니다.

비동기/대기의 이점

1. 순차적이고 읽기 쉬운 코드
2. try...catch로 오류 처리.
3. 콜백 복잡성을 줄입니다.

---

Async/Await를 사용하여 실제 시나리오 처리

병렬 실행: Promise.all

여러 개의 독립적인 비동기 작업을 병렬로 실행해야 하는 경우:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Data fetched!");
            resolve("Fetched data");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

오류 처리: try...catch 대 .catch()

비동기 기능의 try...catch를 사용하여 오류를 적절하게 관리합니다.

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

---

비동기 JavaScript에 대한 일반적인 FAQ

기다림을 잊어버리면 어떻게 되나요?

이 함수는 해결된 값 대신 Promise를 반환합니다. 예상치 못한 동작이 발생할 수 있습니다.

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

Promise 없이 Async/Await를 사용할 수 있나요?

아니요, Wait는 Promise로만 작동합니다. 그러나 fetch 및 Node.js의 fs.promises API와 같은 라이브러리는 기본 약속 기반 메서드를 제공합니다.

콜백은 언제 사용해야 합니까?

콜백은 작고 간단한 작업이나 Promise를 지원하지 않는 이전 API로 작업할 때 여전히 유용합니다.

---

결론

비동기 JavaScript를 마스터하는 것은 최신 웹 애플리케이션을 사용하는 모든 개발자에게 필수적입니다. 콜백부터 시작하면 Promise와 async/await가 비동기 코드를 단순화하고 가독성을 향상시키는 방법을 이해할 수 있습니다. 콜백을 조금만 사용하고, 더 나은 오류 처리를 위해 promise를 활용하고, 깔끔하고 직관적인 코드를 위해 async/await를 수용하세요. 이러한 도구를 사용하면 프로젝트의 모든 비동기 문제를 해결할 수 있습니다.

위 내용은 비동기 JavaScript 마스터하기: 콜백, 약속 및 단순화된 Async/Await의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!