Async/Await 분해 🔥

Async/Await는 자바스크립트에 포함된 놀라운 기능 중 하나입니다. 동기식 스타일로 비동기 코드를 작성하는 최고의 방법을 제공합니다. 예, 잘 들었습니다. 이 패턴을 사용하면 개발자가 기계뿐만 아니라 사람이 읽을 수 있는 코드를 작성할 수 있습니다. 코드는 기계가 실행하기 위한 것일 뿐만 아니라 인간이 해석하고 개발하기 위한 것이기도 합니다.

구문 설탕을 파헤치기 전에 비동기 프로그래밍의 일부 전임자를 살펴보고 이 패턴이 비동기 세계에서 진정으로 묘책이 될 수 있는 이유를 알아보겠습니다.

콜백

콜백은 약속이 도착하기 전에 비동기 프로그래밍을 위한 솔루션이었습니다. 코드 흐름과 복잡성을 고려할 때 당시 javascript의 고통스러운 부분 중 하나였습니다. 예, 개발자를 많이 괴롭혔습니다. Inversion of control는 이러한 프로그래밍 패턴을 피하기 위한 주요 관심사 중 하나였습니다.

예를 들어 다음 코드chunk를 고려하십시오.

somethirdPartyLibrary.checkout(function doPayment() {
 initiatePayment();
})

타사 서비스를 사용하여 체크아웃 프로세스를 처리하는 온라인 부트 캠프를 운영한다고 생각해 보십시오. 도서관이 고객에게 청구할 시간을 결정하면 콜백(doPayment)을 호출하여 지불을 기록합니다. 라이브러리가 콜백을 한 번 호출하면 모든 것이 정상입니다. 일부 문제로 인해 라이브러리가 콜백을 여러 번 호출하거나 전혀 호출하지 않는 경우 어떻게 됩니까? 이로 인해 심각한 문제가 발생하고 고객의 신뢰가 깨질 수 있습니다.



이것이 위에서 논의한 제어 역전입니다. 우리는 고객에게 청구하는 권한을 도서관에 넘기고 있습니다. 이것은 피해야 할 이상한 패턴 중 하나이며 여전히 사용 중입니다.

그리고 구독 상태에 대해 고객에게 알려야 한다는 기능 요청이 아무데도 오지 않았습니다. 콜백을 사용하여 이러한 방식으로 기능을 구현할 것입니다.

somethirdPartyLibrary.checkout(function doPayment() {
 initiatePayment(function notifyAboutSuccess() {
     showSuccess();
   }, function notifyAboutFailure() {
     showFailure();
   }
 );
})

이로 인해 콜백이 여러 개 중첩되고 다소 혼란스럽습니다 😓 그렇죠? 이제 성공 알림에 성공해야 하는 작업을 수행하려는 경우 이를 notifyAboutFailure()에 대한 콜백으로 중첩하고 곧 callback hell 상태가 됩니다. 그러면 우리의 코드 흐름은 이와 같을 것입니다.



구주께서 약속하시다

더 많은 것을 위한 길을 닦은 약속human-readable code . 약속을 사용하여 시나리오를 다음과 같이 구현할 수 있습니다.

somethirdPartyLibrary.checkout()
.then(initiatePayment)
.then(showSuccess)
.catch(showFailure)

여기에서는 흐름이 깔끔하며 고객에게 요금을 청구하는 제어도 우리와 함께 합니다. 일부 사용자는 somethirdPartyLibrary.checkout이 여러 번 확인되면then 여러 번 실행될지 의심할 수 있습니다. 아니요, 그렇지 않습니다. Promise는 한 번만 해결되거나 거부될 수 있습니다. Promise는 지금까지 매우 훌륭했습니다. 여기서 유일한 관심사는 일부 작업이 해결할 Promise에 의존하는 경우 일반적으로 모든 작업을 then 이벤트 핸들러에 래핑해야 한다는 것입니다. asynchronous code 방식으로 synchronous를 쓸 수 있게 해주는 마법 같은 해결책은 무엇일까요?

은총알이 온다 🎯

Async/Await를 사용하여 구현을 다시 작성할 수 있습니다.

(async function() {
  try {
    await somethirdPartyLibrary.checkout()
    await initiatePayment();
    showSuccess();
  } catch(err) {
    showFailure(err);
  }
})();

이건 정말 마법이 맞죠?

무너뜨리다

이러한 종류의 흐름은 javascript에서 Generators로 달성됩니다. 예, Async/Await는 생성기 및 Promise Underhood의 도움으로 구현됩니다.

function resumeHandleCheckout() {
    iterator.next();
}

function* handleCheckout() {
    yield someThirdPartyLibrary.checkout();
    yield initiatePayment();
    showSuccess();
}

let iterator = handleCheckout();

let promiseFromLibrary = iterator.next();


promiseFromLibrary
.then(resumeHandleCheckout)
.then(resumeHandleCheckout)
.catch(showFailure);

Async/Await의 언더후드 메커니즘을 얻을 수 있습니까? 모든 복잡성을 처리하고 구문 설탕을 제공합니다.

이는 개발자가 비동기 코드를 동기식 스타일로 작성할 수 있고 이제 사람이 더 읽기 쉬운 코드를 작성할 수 있게 해주기 때문에 진정한 거래 차단기입니다. 이 게시물을 동료들과도 자유롭게 공유하십시오.