Angular Async/Await: 왜 필요했고 어떻게 사용하는지

Angular는 훌륭한 프레임워크이지만 비동기 코드를 작성하고 비동기 호출을 하는 것은 어렵습니다. 특히 Async / Await와 Angular Promise 중에서 결정할 수없는 경우. 따라서 이 자습서에서는 예제와 코드 조각을 통해 Async/Await와 Promise의 차이점을 이해하는 데 도움을 드리겠습니다. 또한 콜백 지옥을 쉽게 피할 수 있는 방법을 설명하고 Ignite UI for Angular Components를 사용하여 JavaScript에서 Async/Await를 사용하는 방법을 시연하겠습니다.

Try Ignite UI for Angular

Angular에서 비동기 코드란 무엇입니까?

비동기 코드에 대해 이야기할 때 단순히 코드가 순차적으로 실행되지 않고 프로세스에 다중 스레딩이 포함된다는 것을 의미합니다. 기본 응용 프로그램 스레드를 중단하지 않고 별도의 코드 블록을 실행하는 병렬 프로그래밍의 한 형태입니다. 비동기 코드 실행은 대규모 반복의 경우 또는 복잡한 작업이 있는 경우에 유용합니다.

그러나 Angular 앱의 단순성과 단기 실행 작업을 목표로 한다면 비동기 프로그래밍을 피하는 것이 좋습니다. 일반적으로 비동기 코드는 읽기가 더 어렵기 때문에 가독성을 향상시키고 개발자가 더 간단하게 만들 수 있는 모든 것이 품질 향상 도구로 간주됩니다. 그리고 JavaScript에는 이에 대처할 수 있는 고유한 트릭과 메커니즘이 있습니다.

How JavaScript Handles Asynchronous Code

기본적으로 JavaScript는 동기식 단일 스레드 언어로, 한 번에 하나의 명령문을 위에서 아래로 실행합니다. 이는 새 스레드와 프로세스가 주 프로그램 흐름과 병렬로 코드를 실행할 수 없음을 의미합니다. 하나의 호출 스택과 하나의 힙 메모리가 있으며 코드를 순서대로 실행하고 다음 코드로 이동하기 전에 코드 조각을 완료해야 합니다. 모든 것이 순차적으로 일어납니다. 그러나 예를 들어 단일 페이지에서 여러 AJAX 호출을 수행해야 하는 경우에는 어떻게 될까요?

가장 먼저 떠오르는 해결책은 콜백을 사용하는 것입니다. 그러나 그들은 프로그래머에게 "콜백 지옥"으로 알려진 주요 문제로 이어집니다. 기본적으로 이는 여러 요청과 데이터 변환을 수행해야 하는 중첩된 약속 후 코드 구조로, 종종 코드를 유지 관리하고 읽기 어렵고 확장성이 떨어지는 앱을 초래합니다.

콜백이 Angular 앱의 비동기 코드를 처리하는 가장 좋은 방법은 아닙니다. 그러면 어쩌죠? 어쩌면 Angular 약속일까요? 이 패턴은 비동기 작업을 효율적으로 래핑하고 완료되면 알립니다. 그러나 Angular Promise를 사용하는 것은 더 깔끔하고 유지 관리하기 쉬운 코드를 제공하더라도 동일한 코드를 반복해서 재사용하는 경우가 많기 때문에 DRY(Don't Repeat Yourself) principle.cl 모순되기 때문에 최적의 솔루션이 아닙니다

고맙게도 Angular 에는 Async / Await가 있습니다.

Using Async/Await in Angular

JavaScript의 가장 좋은 개선 사항 중 하나는 ECMAScript 7에 도입된 Async/Await 기능입니다. 기본적으로 Async/Await는 Promise 위에서 작동하며 동기 방식으로 비동기 코드를 작성할 수 있습니다. 코드를 단순화하고 흐름과 논리를 더 쉽게 이해할 수 있습니다.

더 이상 then 및 catch chaining을 사용하지 않기 때문에 try/catch를 실행하여 오류를 처리할 수 있습니다.

Async/Await 대 Promise: 차이점은 무엇입니까?

Async/Await와 promises의 차이점을 제시하기 위해 보다 이해하기 쉽고 간결한 방식으로 비교할 수 있는 테이블을 만들어 보겠습니다.

Promise	Async/Await
Promise는 미래의 어느 시점에서 실행을 완료할 수 있는 작업입니다	Async/Await는 약속을 기반으로 합니다. 그것들은 약속에 대한 구문 론적 설탕으로, 코드를 더 동기화적으로 보이게 합니다
오류 처리는 .then() 및 catch() 메소드를 사용하여 수행됩니다	오류 처리는 try() 및 catch() 메서드를 사용하여 수행됩니다
때때로 약속 체인을 이해하기 어려울 수 있습니다	Async 및 await를 사용하면 코드를 더 쉽게 읽고 프로그램의 흐름을 이해할 수 있습니다
3가지 상태가 있습니다 – 보류 중, 해결됨 및 거부됨	해결되거나 거부된 약속을 반환합니다

​Angular Data Grid에서 두 구문을 모두 사용하여 하나의 예를 만들고 차이점을 살펴보겠습니다. API에 대해 두 개의 비동기 호출을 수행하는 함수가 있는데, 하나는 사용자 데이터를 가져오기 위한 것이고 다른 하나는 사용자가 회원인 클럽을 가져오기 위한 것입니다. 두 번째 호출은 첫 번째 호출에 따라 달라지며, 이는 다른 요청을 진행하기 전에 getUserData()를 완료해야 함을 의미합니다. 두 구문 모두 읽기 쉽지만 .then() 및 .catch() 와 함께 promise를 사용하면 콜백 지옥이 발생하여 코드를 이해하고 유지 관리하기가 어려울 수 있습니다.

const makeRequest = () =>
     getUserData()
    . then(user => getClubsForUser(user.id))
    .then(console.log)
    .catch(err => console.log('Error: ' + err.message));

const makeRequest = async () => {
    try {
        let user = await getUserData();
        let clubs = await getClubsForUser(user.id);
        console.log(clubs);
     }
    catch(err) {
        console.log(err.message);
   }
};

 

Ignite UI와 함께 Angular에서 Async/Await를 사용하는 방법

양식 입력에서 사용자 데이터를 가져온 다음 API에 요청하여 사용자의 자격 증명이 올바른지 확인하고 그렇다면 홈 페이지로 리디렉션하는 함수를 만들어 보겠습니다. Ignite UI for Angular에서 Async/Await를 사용하면 이러한 상황에서 도움이 될 수 있습니다. 우리는 비동기 작업인 API에 대한 요청을 가지고 있기 때문에 데이터를 저장하는 데 다른 문제가 없는지 await를 사용할 것입니다.

const submitLoginData = async () => { 
    try { 
         if (this.userInput.email && this.userInput.password) { 
         const response = await this.loginUser(this.userInput); 

         if (response.statusCode === 200) { 
             alert('User is successfully logged in!'); 
             await saveUserData(response.data); 
             this.router.navigate(['/']); 
         } 
         else { 
             alert(response.message); 
             this.router.navigate(['/login']); 
         }
     } 
   } 
     .catch(err) { 
         alert('Something went wrong, try again later!') 
         this.router.navigate(['/login']); 
     } 
} 

여기에서 .then() 및 .catch()를 확실히 사용할 수 있지만 Ignite UI for Angular의 Async/Await는 코드를 더 우아하게 보이게 합니다. 사용할 구문을 선택하는 것은 코드를 작성하는 사람에게 달려 있습니다. 그러나 스타일을 혼합하면 코드가 복잡해질 수 있으므로 한 가지 접근 방식을 고수하는 것이 좋습니다.

Async/Await Angular Best Practices

async 및 await를 사용하여 비동기 코드를 처리할 때는 항상 코드를 try/catch 블록에 넣어야 합니다. 이런 식으로 우리는 약속이 오류를 발생시키더라도 제대로 포착되고 처리되도록 할 것입니다.

async function loadComponents() {
     try {
         this.components = await fetchComponentsByType('charts');
     }
     .catch(err) {
         logger.error(err);
     }
}

Ignite UI 사용하면 비동기 함수에서 약속을 명시적으로 반환할 필요가 없습니다. 사실, 비동기 함수는 항상 Promise를 반환합니다. 즉, 비동기 함수 내에서 Promise를 생성하면 Angular 앱에 성능 오버헤드만 추가됩니다.

async function loadChartSelectors() {
     return Promise.resolve(['igx-data-chart', 'igx-pie-chart', 'igx-category-chart']);
}

요약

Async/Await 키워드를 사용하면 코드를 더 쉽게 읽고 디버그할 수 있습니다. 그러나 우리가 그것들을 올바르게 사용하고 싶다면, 우리가 말했듯이 약속은 약속에 대한 통사론적 설탕에 지나지 않기 때문에 일반적으로 약속이 어떻게 작동하는지 이해해야 합니다.