Async/Await vs Promises: JavaScript 초보자를 위한 간단한 가이드

라떼를 가져오기 위해 JavaScript를 위해 커피숍에서 줄을 서서 기다리고 있는 것 같은 느낌을 받은 적이 있나요? 비동기 프로그래밍은 종종 그렇게 느껴질 수 있습니다. 동시에 여러 주문이 처리되면 기다리게 될 수 있습니다. 다행히 Promise 및 async/await와 같은 도구를 사용하면 프로세스가 원활하고 효율적으로 유지되어 코드가 지연 없이 계속 이동할 수 있습니다.

이 가이드에서는 Promise의 작동 방식, async/await가 도입된 이유, 비동기 코드 작성을 단순화하는 방법을 자세히 설명합니다. 이러한 개념을 이해하려는 초보자이거나 각 접근 방식을 언제 사용해야 하는지 명확하게 알고 싶은 사람이라면 이 문서가 기본 사항을 익히는 데 도움이 될 것입니다.

약속이란 무엇입니까?

Promise는 비동기 작업을 처리하기 위한 JavaScript의 기본 개념입니다. 기본적으로 Promise는 지금, 나중에 또는 절대 사용할 수 없는 값을 나타냅니다. 패키지의 추적 번호와 같다고 생각하세요. 아직 패키지가 없는 동안 추적 번호를 통해 배송 중이라는 확신을 얻을 수 있습니다(또는 문제가 발생한 경우 알려줍니다).

"지금, 나중에, 아니면 절대"라는 내러티브를 바탕으로 Promise는 실제로 다음 세 가지 상태 중 하나로 작동합니다.

• Pending: 비동기 작업이 아직 완료되지 않았습니다.
• 이행됨: 작업이 성공적으로 완료되었으며 이제 Promise가 결과를 보유합니다.
• 거부됨: 문제가 발생하여 Promise에서 오류를 제공합니다.

Promise를 생성하고 작업하려면 간단한 API가 필요합니다. 약속을 정의하는 방법은 다음과 같습니다.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "JavaScript Basics" };
    resolve(data); // Simulates a successful operation
    // reject("Error: Unable to fetch data"); // Simulates a failure
  }, 1000);
});

결과를 처리하려면 .then(), .catch() 및 .finally() 메소드를 Promise 객체에 연결할 수 있습니다.

fetchData
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("Operation complete.");
  });

Promise가 성공적인 결과로 해결되면 then() 메서드의 콜백이 실행됩니다. .catch() 메서드의 콜백은 Promise가 실패한 결과로 해결될 때 실행되고, finally() 메서드의 콜백은 해결 결과에 관계없이 Promise가 해결된 후에 실행됩니다.

약속의 이점

Promise는 흔히 '콜백 지옥'이라고 불리는 깊게 중첩된 콜백에 대한 더 깔끔한 대안을 제공합니다. 콜백을 쌓는 대신 Promise를 사용하면 연결을 허용하여 작업 흐름을 더 쉽게 따라갈 수 있습니다.

doTask1()
  .then((result1) => doTask2(result1))
  .then((result2) => doTask3(result2))
  .catch((error) => console.error("An error occurred:", error));

이 동일한 코드가 기존 콜백을 사용하여 작성되었다면 다음과 같습니다.

doTask1((error1, result1) => {
  if (error1) {
    console.error("An error occurred:", error1);
    return;
  }
  doTask2(result1, (error2, result2) => {
    if (error2) {
      console.error("An error occurred:", error2);
      return;
    }
    doTask3(result2, (error3, result3) => {
      if (error3) {
        console.error("An error occurred:", error3);
        return;
      }
      console.log("Final result:", result3);
    });
  });
});

헷갈리지 않나요? 이것이 바로 Promises가 도입되었을 때 JavaScript 코딩 표준의 판도를 바꾸는 이유였습니다.

약속의 단점

Promise는 기존 콜백 기능보다 크게 향상되었지만 고유한 문제도 있었습니다. 이점에도 불구하고 복잡한 시나리오에서는 다루기 어려워져 코드가 장황해지고 디버깅이 어려워질 수 있습니다.

.then() 체이닝을 사용하더라도 여러 비동기 작업을 처리할 때 Promise로 인해 코드가 복잡해질 수 있습니다. 예를 들어, .then() 블록을 사용하여 순차적 작업을 관리하고 .catch()를 사용하여 오류를 처리하는 것은 반복적이고 따라가기가 더 어려울 수 있습니다.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "JavaScript Basics" };
    resolve(data); // Simulates a successful operation
    // reject("Error: Unable to fetch data"); // Simulates a failure
  }, 1000);
});

중첩된 콜백보다 깔끔하지만 연결 구문은 여전히 ​​장황하며, 특히 자세한 사용자 정의 오류 처리 논리가 필요한 경우 더욱 그렇습니다. 게다가 체인 끝에 .catch()를 추가하는 것을 잊어버리면 자동 오류가 발생하여 디버깅이 까다로워질 수 있습니다.

또한 Promise의 스택 추적은 동기 코드만큼 직관적이지 않습니다. 오류가 발생하면 스택 추적이 비동기 흐름에서 문제가 발생한 위치를 명확하게 나타내지 못할 수 있습니다.

마지막으로 Promise는 콜백 지옥을 줄이는 데 도움이 되지만 작업이 상호 의존적인 경우 여전히 복잡성을 초래할 수 있습니다. 중첩된 .then() 블록은 특정 사용 사례에 다시 적용되어 원래 해결해야 했던 가독성 문제를 다시 가져올 수 있습니다.

비동기/대기 입력

JavaScript의 비동기 프로그래밍은 ES2017(ES8)에 async/await가 도입되면서 큰 발전을 이루었습니다. Promise를 기반으로 구축된 async/await를 사용하면 개발자는 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있습니다. 이는 가독성을 향상시키고, 오류 처리를 단순화하며, 장황함을 줄이는 진정한 판도를 바꾸는 것입니다.

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

Async/await는 비동기 코드를 더 쉽게 이해하고 유지 관리할 수 있도록 설계된 구문입니다.

async 키워드는 항상 Promise를 반환하는 함수를 선언하는 데 사용됩니다. 이 함수 내에서 wait 키워드는 Promise가 해결되거나 거부될 때까지 실행을 일시 중지합니다. 그 결과 복잡한 비동기 작업에서도 선형적이고 직관적으로 느껴지는 흐름이 만들어졌습니다.

다음은 async/await가 위에서 본 동일한 코드 예제를 어떻게 단순화하는지 보여주는 예입니다.

fetchData
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("Operation complete.");
  });

Async/await를 사용하면 .then() 체인이 필요하지 않으므로 코드가 순차적으로 흐를 수 있습니다. 이렇게 하면 특히 차례로 실행해야 하는 작업의 경우 논리를 더 쉽게 따라갈 수 있습니다.

Promise를 사용하면 .catch()를 사용하여 체인의 모든 수준에서 오류를 포착해야 합니다. 반면 Async/await는 try/catch를 사용하여 오류 처리를 통합하여 반복을 줄이고 명확성을 높입니다.

Async/await는 Promise보다 더 직관적인 스택 추적을 생성합니다. 오류가 발생하면 추적에 실제 함수 호출 계층이 반영되므로 디버깅이 덜 복잡해집니다. 전체적으로 async/await는 동기 코드 작성 방식과 일치하기 때문에 더 "자연스럽다"고 느껴집니다.

Promise와 async/await 비교

이미 본 것처럼 Async/await는 특히 순차 작업의 가독성 측면에서 빛을 발합니다. .then() 및 .catch() 연결을 사용하는 Promise는 빠르게 장황하거나 복잡해질 수 있습니다. 대조적으로, 비동기/대기 코드는 동기 구조를 모방하므로 따르기가 더 쉽습니다.

유연성

특히 동시 작업의 경우 약속은 여전히 ​​유효합니다. Promise.all() 및 Promise.race()와 같은 메서드는 여러 비동기 작업을 병렬로 실행하는 데 더 효율적입니다. Async/await도 이러한 경우를 처리할 수 있지만 동일한 결과를 얻으려면 추가 논리가 필요합니다.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "JavaScript Basics" };
    resolve(data); // Simulates a successful operation
    // reject("Error: Unable to fetch data"); // Simulates a failure
  }, 1000);
});

오류 처리

단일 .catch()를 사용한 중앙 집중식 오류 처리는 선형 Promise 체인에 적합하지만 최고의 가독성을 위해 체인 전체의 다양한 오류 유형에 분산 .catch 호출을 사용하는 것이 좋습니다.

반면, try/catch 블록은 특히 순차적 작업을 처리할 때 오류를 처리하기 위한 보다 자연스러운 구조를 제공합니다.

성능

성능 측면에서 async/await는 Promise 위에 구축되므로 본질적으로 Promise와 동일합니다. 그러나 동시성이 필요한 작업의 경우 Promise.all()을 사용하면 여러 Promise를 병렬로 실행할 수 있으므로 Promise가 거부되면 빠르게 실패하므로 더 효율적일 수 있습니다.

언제 어느 것을 사용해야 하는가?

여러 API에서 동시에 데이터를 가져오는 등 작업에 동시 작업이 많이 포함되는 경우 Promise가 더 나은 선택일 가능성이 높습니다. 비동기 코드에 체인 연결이 많이 포함되지 않은 경우 Promise는 단순성 때문에 해당 상황에도 적합할 것입니다.

반면에 async/await는 많은 작업을 순차적으로 실행해야 하는 상황이나 가독성과 유지 관리 가능성이 우선시되는 상황에서 탁월합니다. 예를 들어 데이터 가져오기, 변환, 저장과 같은 일련의 종속 작업이 있는 경우 async/await는 깔끔하고 동기적인 구조를 제공합니다. 이를 통해 작업 흐름을 더 쉽게 따라갈 수 있으며 try/catch 블록을 사용하여 중앙 집중식 오류 처리가 단순화됩니다. Async/await는 읽기 쉬운 코드를 우선시하는 초보자나 팀에게 특히 유용합니다.

결론

JavaScript는 비동기 작업을 관리하기 위한 두 가지 강력한 도구인 Promise와 async/await를 제공합니다. Promise는 개발자가 비동기 작업을 처리하는 방식에 혁명을 일으켜 콜백 지옥과 같은 문제를 해결하고 연결을 활성화했습니다. Async/await는 Promise를 기반으로 구축되어 특히 순차적 작업의 경우 더욱 자연스럽고 직관적인 느낌을 주는 깔끔한 구문을 제공합니다.

이제 두 가지 접근 방식을 모두 살펴보았으므로 필요에 가장 적합한 접근 방식을 선택할 준비가 되었습니다. Promise 기반 함수를 async/await로 변환하고 가독성의 차이를 관찰해보세요!

자세한 내용은 MDN Promise 문서를 확인하거나 대화형 코딩 샌드박스를 사용해 보세요!

위 내용은 Async/Await vs Promises: JavaScript 초보자를 위한 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!