JavaScript 개발자를 위한 Aysnc 및 Await에 대한 실용 가이드

소개

Async 및 Await는 ECMAScript 2017(ES8)에 도입된 JavaScript 키워드로, 더 읽기 쉽고 동기식이며 관리하기 쉬운 방식으로 비동기 코드를 작성할 수 있습니다. API에서 데이터를 가져오는 등 완료하는 데 시간이 걸리는 처리 작업을 단순화합니다.

자세히 알아보기 전에 먼저 JavaScript의 동기 및 비동기 프로그래밍 개념을 이해해 보겠습니다. 동기 프로그래밍에서는 작업이 나타나는 순서대로 순차적으로 실행됩니다. 각 작업은 다음 작업이 시작되기 전에 완료되어야 합니다. 반면, 비동기 프로그래밍을 사용하면 작업이 백그라운드에서 실행될 수 있으므로 JavaScript가 이전 작업이 완료될 때까지 기다리지 않고 다른 작업을 계속 실행할 수 있습니다.

아시다시피 JavaScript는 단일 스레드 언어입니다. 즉, 한 번에 하나의 작업만 실행할 수 있습니다. 그렇다면 JavaScript는 비동기 코드를 어떻게 처리합니까? 이는 JavaScript 런타임 환경과 함께 작동하는 주요 메커니즘인 이벤트 루프를 통해 가능해졌습니다. 이벤트 루프를 사용하면 메인 스레드를 차단하지 않고 비동기 작업을 실행할 수 있으므로 JavaScript의 응답성이 유지됩니다. 더 이상 지체하지 마시고 커피 한잔 하시며 오늘의 주제로 바로 들어가시죠!

비동기란 무엇입니까?

이 개념을 더 잘 이해하기 위해 보다 실용적인 접근 방식을 취하겠습니다. async 및 Wait가 도입되기 전에는 ES6(ECMAScript 2015)에 도입된 "기존 방식"을 사용하여 Promise를 처리했습니다. 아래 예를 살펴보겠습니다.

위의 코드는 Promise를 처리하는 전통적인 구문을 보여줍니다. Promise 생성자는 새로운 Promise 인스턴스를 생성하는 데 사용됩니다. 이 함수는 두 개의 매개변수(Resolve 및 Reject)를 포함하는 함수(실행기 함수라고도 함)를 인수로 받아들입니다. 이 실행기 함수에는 비동기 작업에 대한 논리가 포함되어 있습니다. 이 예에서는 Resolve가 즉시 호출되어 Promise가 특정 값으로 성공적으로 완료되었음을 알립니다. Promise가 해결되면 .then 메소드가 트리거되어 콜백을 실행하여 결과를 기록합니다.

그러나 이 구문은 기억하기 다소 까다로울 수 있습니다. async/await의 도입으로 Promise 처리 프로세스가 단순화되어 읽고 이해하기가 훨씬 쉬워졌습니다. 아래 예시를 살펴보겠습니다.

비동기 함수를 구현하기 위해 JavaScript에 이것이 일반 함수가 아니라 비동기 함수임을 알려주는 async 키워드를 사용합니다. 두 번째 예는 화살표 기능을 사용하여 동일한 작업을 수행하는 방법을 보여줍니다.

주의해야 할 또 다른 중요한 개념은 wait 키워드입니다. async와 wait가 함께 작동하여 Promise 처리를 단순화합니다. wait 키워드는 비동기 함수 내에서만 사용할 수 있습니다. 함수 외부나 일반 함수 내에서는 사용할 수 없습니다. 비동기로 표시된 함수 내에 항상 나타나야 합니다. 이제 기본 사항을 다루었으니 개념에 대해 더 자세히 살펴보겠습니다!

배후에서 작동하는 방식

많은 JavaScript 개발자가 코드에서 정기적으로 async/await를 사용하지만, 그 내부에서 어떻게 작동하는지 진정으로 이해하는 개발자는 소수에 불과합니다. 이것이 바로 이 튜토리얼이 등장하는 곳입니다. 이를 분석하기 위해 예를 살펴보겠습니다.

이 예에서는 async/await 접근 방식과 비교하여 Promise의 작동 방식을 더 잘 이해하기 위해 .then 메서드를 사용합니다. handlerPromise() 함수가 호출되면 코드는 한 줄씩 실행됩니다. JavaScript가 .then 메소드를 발견하면 Microtask Queue에 콜백을 등록하고 즉시 다음 줄로 이동하여 'hello world'를 인쇄합니다.

모든 동기 작업이 완료되면 JavaScript 엔진은 Microtask 대기열에서 대기 중인 작업을 확인합니다. 5초 후에 setTimeout이 완료되고 해당 콜백이 호출 스택으로 다시 푸시됩니다. 이 시점에서 Promise가 해결되고 등록된 콜백이 실행되어 결과가 기록됩니다.

간단히 말하면 JavaScript 엔진은 기다리지 않고 바로 다음 코드 줄로 이동합니다. 이제 async/await를 사용할 때 동일한 동작이 적용됩니까, 아니면 다르게 작동합니까? 알아봅시다!

위의 예에서는 handlerPromise() 함수가 호출되면 첫 번째 줄 'the start'가 인쇄됩니다. 그런 다음 JavaScript는 함수가 비동기식이며 Promise를 포함함을 나타내는 wait 키워드를 발견합니다. 이는 setTimeout으로 인해 Promise가 해결되는 데 5초가 소요된다는 것을 식별합니다. 이 시점에서 handlerPromise() 함수는 일시 중지되고(호출 스택에서 제거됨) 함수 내부의 wait 이후의 모든 코드는 일시 중지됩니다.

JavaScript 엔진은 프로그램의 나머지 부분을 계속 실행합니다. 5초 후에 Promise가 해결되고 일시 중단된 함수가 호출 스택으로 반환되며, handlerPromise() 내부의 나머지 줄 'Promise is 해결됨'과 'the end'가 순서대로 실행됩니다.

함수를 일시 중단해도 메인 스레드가 차단되지 않는다는 점에 유의하는 것이 중요합니다. handlerPromise() 함수 외부에 다른 코드가 작성된 경우 Promise가 해결을 기다리는 동안 실행됩니다.

아래 예에서는 실제 동작을 보여줍니다.

이 예에서는 첫 번째 출력이 시작입니다. JavaScript는 wait 키워드를 만나면 Promise가 해결되는 데 5초가 걸린다는 것을 인식합니다. 이 시점에서 함수는 일시 중지되고 JavaScript는 함수 외부의 모든 코드를 실행합니다. 그 결과 다음에는 We are Outside가 인쇄되었습니다.

5초 후에 Promise가 해결되면 handlerPromise() 함수가 호출 스택으로 복원되고 나머지 줄이 실행되어 Promise가 해결된 후 인쇄됩니다.

한 가지 예를 더 살펴보겠습니다. 개념을 더 잘 이해하기 위해 다른 예에서 async/await를 사용하여 API 호출을 시도해 보겠습니다.

위 코드에서 실행 프로세스는 앞서 설명한 것과 동일한 원칙을 따릅니다. JavaScript가 가져오기 함수를 발견하면 getData() 함수를 일시 중단하고 가져오기 호출이 응답 개체를 반환할 때까지 기다립니다. 이 개체에는 응답의 상태, 헤더, 본문과 같은 다양한 속성이 포함되어 있습니다. 그런 다음 응답을 사용할 수 있게 되면 함수는 실행을 재개합니다.

응답 본문은 우리에게 필요한 데이터이지만 원시 형식(예: 텍스트 또는 바이너리)이므로 즉시 사용할 수 없습니다. 보다 쉽게 ​​조작할 수 있도록 이를 JavaScript 객체로 변환하기 위해 원시 JSON 응답을 구문 분석하는 .json() 메서드를 사용합니다. 이 프로세스에는 또 다른 Promise가 포함되므로 두 번째 대기가 필요합니다. Promise가 해결될 때까지 함수는 다시 일시 중지됩니다.

두 약속이 모두 이행되면 getData() 함수가 재개되고 구문 분석된 데이터가 콘솔에 인쇄됩니다. 가져오기 작동 방식을 설명하는 간단한 방법이지 않나요? 이제 주요 토론으로 돌아갑니다!. API 응답이 실패하면 어떻게 되나요? async/await 오류를 어떻게 관리하나요? 다음 섹션에서 이에 대해 자세히 살펴보겠습니다.

Async/Await 오류 처리

전통적으로 Promise의 오류는 .catch 메서드를 사용하여 처리되었습니다. 하지만 async/await를 사용할 때 오류를 어떻게 처리할 수 있나요? 여기서 try...catch 블록이 작동합니다.

위 코드에서 Promise는 Promise가 성공적으로 해결되면 실행되는 try 블록 내에 포함됩니다. 그러나 Promise가 거부되면 오류가 catch 블록 내에서 포착되어 처리됩니다.

하지만 여전히 기존 방식으로 오류를 처리할 수 있다는 사실을 알고 계셨나요? 예는 다음과 같습니다.

전통적인 접근 방식을 사용하여 async/await의 오류를 처리하려면 위에서 설명한 대로 catch 메서드를 함수에 연결하기만 하면 됩니다. try/catch 블록과 동일한 방식으로 작동합니다.

결론

Async/await는 JavaScript가 비동기 작업을 처리하는 방식을 혁신하여 .then 및 .catch와 같은 기존 방법에 비해 코드를 더 읽기 쉽고 관리하기 쉽게 만들었습니다. 비동기 및 대기를 활용하면 보다 동기적인 느낌을 주는 비동기 코드를 작성할 수 있어 전반적인 코드 명확성이 향상됩니다. 이벤트 루프 및 마이크로태스크 대기열과 같은 내부 작업을 이해하는 동시에 async/await 구현은 현대 JavaScript 개발에 간단하고 매우 효과적입니다. try/catch 또는 .catch를 사용한 적절한 오류 처리를 통해 성공 및 실패 Promise를 모두 자신 있게 관리할 수 있습니다.

곁을 지켜주셔서 감사합니다! 이 기사를 통해 async/await가 좀 더 명확해졌기를 바랍니다. 코딩 모험의 성공을 기원합니다. 가서 놀라운 것을 만들어 보세요!

위 내용은 JavaScript 개발자를 위한 Aysnc 및 Await에 대한 실용 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!