Javascript에서 Promise와 async/await의 차이점

안녕하세요 여러분, 이 튜토리얼에서는 예제를 통해 async/await 구조와 약속의 차이점에 대해 알아봅니다.
약속은 비동기 프로세스를 관리하기 위해 자바스크립트 아키텍처에서 널리 사용됩니다. async-await 키워드의 도움으로 자바스크립트 세계에 새로운 구문 설탕이 추가되었습니다.

Promise와 Async/Await의 차이점

참고: 아래 목록은 아래에 설명된 숫자와 일치할 수 있습니다.

1- 약속은 실행 완료를 보장하는 프로세스를 나타냅니다.

2- Promise에는 3가지 상태가 있습니다. 이러한 상태는 보류 중, 해결됨, 거부됨입니다.

3- 약속이 .then()으로 연결된 경우 함수를 콜백 체인에 추가한 후 실행을 계속합니다.

4- 오류 처리는 .then() 및 .catch() 메서드를 사용하여 수행할 수 있습니다.

5- Promise Chaining은 이해하고 따르기가 어려울 수 있습니다.

6- 다중 약속 연결로 디버깅이 매우 까다로울 수 있습니다.

7- 약속 체이닝에서 여러 약속에 약속을 사용할 수 있습니다.

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

비동기/대기

1- Async await는 약속에 대한 구문 설탕입니다. 코드를 동기식으로 실행되는 것처럼 보이게 합니다.

2- Async await에는 상태가 없습니다. 비동기 함수는 약속을 반환합니다. 이 약속 상태는 해결되거나 거부될 수 있습니다.

3- 대기는 약속이 해당 실행에 대한 결과를 반환할 때까지 호출된 함수 실행을 일시 중단합니다. 대기 후에 호출된 다른 함수가 있는 경우 이러한 실행은 약속이 완료될 때까지 기다립니다.

4- 오류 처리는 try-catch 블록으로 수행할 수 있습니다.

5- Async/Await를 사용하면 약속 흐름을 훨씬 쉽게 읽을 수 있습니다.
Promise에 비해 기능을 이해하는 것도 매우 쉽습니다.

6- async/await를 사용하면 디버깅이 훨씬 쉬워집니다.

7- Await는 단일 약속 또는 promise.all()에 사용할 수 있습니다.

Promises 또는 async/await를 사용해야 합니까?

그것은 매우 일반적인 질문이며 자바스크립트 코드를 작성하는 동안 사용해야 할 두 가지 경우가 있습니다. 약속과 async-await는 매우 밀접하게 관련되어 있습니다.

첫 번째 비동기 함수에 의존하는 다른 비동기 함수를 사용하는 경우 약속 연결 대신 await를 사용하여 첫 번째 함수가 완료될 때까지 기다려야 합니다.

Await 키워드는 완료될 때까지 다음 행의 실행을 차단합니다. 실행을 차단할 필요가 없다면 await 없이 async 함수를 호출할 수 있습니다. (예를 들어 푸시 알림, 푸시 알림이 전달되었는지 여부를 확인하고 싶지 않다면 await 키워드를 건너뛰면 코드 실행이 비동기식으로 계속됩니다.)
병렬로 실행할 수 있는 비동기 함수가 여러 개 있는 경우 promise.all([promise1,promise2]) 를 사용하여 병렬로 실행할 수 있습니다.

async/await를 사용하면 확실히 비동기 프로세스를 훨씬 더 빨리 이해하는 데 도움이 됩니다.
Promise Chaining을 사용하는 대신 async/await가 훨씬 깔끔한 코드를 제공합니다.

많은 마이크로 서비스와 비동기 함수를 사용하는 경우 async/await를 사용하면 코드를 훨씬 빠르게 디버그하는 데 도움이 됩니다. 약속 체이닝에서 중단점을 생성하는 것은 정말 까다로울 수 있습니다.
Async await는 비동기 코드를 동기 코드처럼 보이게 합니다.
약속에서 오류를 잡으려면 항상 .catch() 블록을 작성해야 합니다.

Async await는 다른 모든 코드와 함께 try-catch 블록에 작성할 수 있습니다.

async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("hello !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

결론:

Promise를 처리하는 동안 async/await를 사용하면 유연성, 깔끔한 코드, 훨씬 더 쉬운 디버깅이 가능합니다.
Promise.all()을 사용하여 병렬 비동기 실행을 실행하는 것 외에는 async/await를 사용하여 다른 모든 비동기 작업을 수행할 수 있습니다.
async/await를 사용하면 큰 프로젝트를 작업하는 동안 확실히 많은 이점을 얻을 수 있으며 귀하와 다른 개발자의 삶이 쉬워집니다.

이것이 javascript Async/Await에 관한 모든 것이며 javascript에서 비교를 약속합니다.