JS 비동기 async/await 에대해

Beomkyu Chung 범 규정 ·2023년 4월 20일

JavaScript Async Await 키워드로 작업하는 방법

JavaScript EcmaScript 2015에 "async" 및 "await"라는 키워드가 추가가 되었다. 이 블로그에서는 다음 개념에 대해 설명한다. JavaScript 실행에 대한 각 키워드의 영향에 대해 이다.

비동기 키워드 작업
Await 키워드의 영향

출처
https://youtu.be/2gjJZv7PD_U
Async 및 Await에 대해 자세히 알아보기 전에 JavaScript의 Promise를 잘 이해하고 있어야 한다. 자세한 내용은 위 비디오를 참조하면 좋다.

Async 키워드로 Promise 반환하기

함수에 "async" 키워드를 추가하면 이 함수는 실행 시 기본적으로 Promise를 반환한다. Async 키워드는 함수 사용자에게 추가 정보를 제공한다.

함수에는 일부 비동기 실행이 포함되어 있다.
반환된 값은 Promise의 Resolved Value 이다.
작은 예를 들어 확인해 보자.

async function simpleAsync() {
  return "1"
}

console.log(simpleAsync())

위의 코드에서 반환된 값은 약속이므로 약속을 캡처하고 동일한 값에서 값을 추출할 수 있다. "then"을 사용하여 콜백 함수를 약속과 연결할 수 있다.

async function simpleAsync() {
  return "1"
}

simpleAsync().then((data) => {
    console.log(data)
})

위의 코드가 동작하는 것을 보자…

"비동기" 키워드의 영향을 요약하기 위해 다음과 같이 말할 수 있다.

"async"를 추가하면 함수에서 약속을 반환한다.
함수가 일부 값을 반환하는 경우 해당 값은 약속에서 확인된 값으로 사용할 수 있다.
값이 반환되지 않으면 확인된 값은 "정의되지 않음"이 된다.

비동기 실행 이해

실시간 시나리오로 작업할 때 실행 시 약속을 반환하는 함수가 있을 수 있다. 함수에서 반환된 Promise는 일정 시간 후에 해결될 수 있지만 메인 실행 스레드는 Promise가 해결될 때까지 기다리지 않고 애플리케이션의 동기 부분을 추가로 실행한다. Promise가 확인되면 콜백 함수가 실행된다.

동작을 이해하기 위해 아래 코드를 찾아봅시다.

function returnPromises() {
  var newPromise = new Promise((resolve) => {
    setTimeout(() => {
      console.log("Promise Executed...");
      resolve("Sample Data");
    }, 3000);
  });
}

function ExecuteFunction() {
  var newData = "Mayank";
  var getPromise = returnPromises();
  console.log(newData);
}

ExecuteFunction()

위 실행에 대한 출력은 다음과 같은 출력을 제공합니다.

위의 코드에서 이해해야할것:

값 "Mayank"는 "Promise Executed" 앞에 표시된다.
약속은 비동기식이며 완료를 위해 다른 스레드에서 대기 중이다.
JavaScript는 Promise가 해결될 때까지 기다리지 않고 추가로 실행한다.
약속이 해결되면 콜백 함수가 호출된다.

"await" 키워드로 작업하기

Promise 앞에 "await"를 추가하면 실행 스레드가 더 진행하기 전에 비동기 작업/약속이 해결될 때까지 기다리게 된다. "await" 키워드를 추가하면 응용 프로그램에 동기식 동작이 도입된다. Promise도 동기식으로 실행된다. 위의 코드를 업데이트하여 동기 동작을 복제해 보자.

function returnPromises() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Promise Executed...");
      resolve("Sample Data");
    }, 3000);
  });
}

async function ExecuteFunction() {
  var newData = "Mayank";
  var getData = await returnPromises();
  console.log(getData);
}

ExecuteFunction()

위 코드의 출력은 다음과 같다:

위의 코드에서 이해해야할 점:

"returnPromise()"는 해결되기 전에 최소 3초 동안 기다려야 하는 Promise를 반환합니다.
함수 호출 앞의 "await" 키워드를 업데이트하여 코드가 추가로 실행되기 전에 약속이 해결되도록 했습니다.
3초의 지연 후 약속이 해결되고 코드의 추가 실행이 재개됩니다. 동기식 동작을 도입합니다.
약속이 해결될 때까지 주 스레드를 명시적으로 기다리게 하기 때문에 특정 지연 후에 결과를 사용할 수 있음을 알리기 위해 "await" 키워드를 포함하는 함수 앞에서 "async" 키워드를 업데이트해야 합니다.
대기 및 비동기는 실행에 동기식 동작을 도입했습니다.

비동기/대기의 장점

깨끗한 코드: 파일 예제에서 볼 수 있듯이 async/await는 코드를 더 깨끗하고 읽기 쉽게 만든다.
오류 처리: 위의 파일 예제에서 볼 수 있듯이 비동기 함수에서 try/catch를 사용하여 비동기 및 동기 오류를 모두 처리할 수 있다.
디버깅: then 체인을 디버깅할 때 then 함수 내부에 중단점을 배치한 다음 코드를 건너뛰면 다음 then 함수로 넘어가지 않는다. 건너뛰기는 동기 코드에서만 작동하기 때문이다. async/await를 사용하면 동기식 코드에서와 마찬가지로 await를 건너뛴다.