JS 비동기: 비동기/대기

이 게시물은 JavaScript에서 비동기 데이터를 사용하는 방법을 설명하고 보여주는 3개의 게시물인 JS Async 시리즈의 마지막입니다.

다른 2개의 이전 기사를 확인할 수 있습니다.

JS Async: Promises

JS Async: Callbacks

오늘 우리는 async/await에 대해 이야기하고 어떻게 그리고 무엇을 할 수 있는지에 대한 몇 가지 예를 볼 것입니다.

비동기

키워드 async는 ES2017에서 구현되었습니다. 다음 표기법을 사용하여 자연스럽게 비동기식 함수를 생성할 수 있습니다.

async function myAsyncFunction() {}

이 구현에서 중요하고 훨씬 더 흥미로운 점은 모든 async 함수가 Promise 을 반환한다는 것입니다. 즉, article about promises 에서 이미 알고 있는 모든 인터페이스를 사용할 수 있습니다. 더 잘 이해하기 위해 예를 살펴보겠습니다.

async function myAsyncFunction() {
  return "Hello!";
}

myAsyncFunction().then(payload => {
  console.log(payload); // Hello!
});

async 함수는 반환될 약속의 .then 파이프라인 내에 배열될 값으로 성공 값을 사용합니다. 오류를 내보내야 하는 경우 범위 내에서 오류를 트리거해야 합니다. 실행을 .catch 파이프라인으로 보내려면 다음 예를 살펴보겠습니다.

async function myAsyncFunctionWithError() {
  throw "something wrong happen";
}

myAsyncFunctionWithError().catch(error => {
  console.log(error); // something wrong happen
});

기다리다

await의 사용은 async 키워드로 선언된 함수 내에서만 제한되며 기본적으로 Promise 응답 값을 기다리거나 값을 확인된 Promise로 변환합니다.

async function myAsyncFunction() {
  const payload = await { name: "felipe", age: 22 };
  console.log(payload); // { name: 'felipe', age: 22 }
}

myAsyncFunction();

함수에서 값을 반환하지 않는 경우 실행 호출은 .then 를 사용하지 않고 일반 함수 호출로 유지됩니다.

try/catch로 오류 잡기

Await는 항상 promise의 성공 값을 예상하므로 오류를 직접 캡처할 방법이 없습니다. 이렇게 하려면 오류가 발생하면 거부 값을 받는 try/catch를 사용해야 합니다. try 블록 내에서 실행 중:

async function myAsyncErrorFunction() {
  throw "ops, something wrong happen";
}

async function myAsyncFunction() {
  try {
    const response = await myAsyncErrorFunction();
  } catch (error) {
    console.log(error); // ops, something wrong happen
  }
}

myAsyncFunction();

이 블록을 실행하면 promisemyAsyncErrorFunction 내부에서 오류가 발생하고 try/catchcatch 블록에서 오류가 캡처됩니다.

요약하면, 구현을 공동으로 사용하면 코드가 매우 간단하고 읽기 쉬워져 비동기(또는 동기) 데이터를 보다 직접적이고 효과적으로 처리할 수 있습니다.

이 시리즈를 즐겼기를 바랍니다. 나중에 봐요!

🔭