async 및 await가 약속의 구문 설탕이라는 말을 들어 보셨을 것입니다. Promise는 I/O 작업, API 호출 등과 같은 비동기 작업에 완벽하게 작동합니다. 그렇다면 async 및 await가 필요한 이유는 무엇입니까?

Promise 관련 문제

가독성

다음 스 니펫을 고려하십시오

const sleep = (delay) =>
  new Promise((resolve) => setTimeout(() => resolve(`sleep ${delay}`), delay));
const result = sleep(1000)
console.log(result);

sleep -> 주어진 지연 후에 해결되는 약속
코드를 실행하려고 하면 예상 출력은 다음과 같습니다.

sleep 1000

대신에

Promise { <pending> }

예상 결과를 얻으려면 다음과 같이 변경해야 합니다.

sleep(1000).then(console.log)

여기서 문제는 Promise를 이행한 후 실행해야 하는 작업을 then 블록에 작성해야 한다는 것입니다. 즉, 약속 이후에 작성된 내용은 then 블록 이전에 실행됩니다. 코드 실행이 선형적이지 않기 때문에 혼동이 발생할 수 있습니다.

오류 처리

Promise는 오류 상황을 처리할 수 있는 꽤 좋은 API를 제공합니다. 오류는 catch 블록과 마찬가지로 then 블록에서 처리할 수 있습니다. 약속의 실행은 try, catch를 실행한 후에 이루어지기 때문에 전통적try and catch은 약속의 경우 작동하지 않습니다.

비동기 및 대기

위의 문제를 해결하는 데 도움이 되는 ECMA 2017의 JavaScript에 Async 및 await가 도입되었습니다. 코드는 선형이 되고 try catch 오류를 처리하는 데 사용할 수 있습니다.

const sleep = (delay) =>
  new Promise((resolve) => setTimeout(() => resolve(`sleep ${delay}`), delay));

async function asyncFunc() {
  try {
    const result = await sleep(1000);
    console.log(result)
  } catch (e) {
    console.log(e);
  }
}

asyncFunc()

await 를 사용하는 경우 약속이 해결되거나 거부될 때까지 기다린 다음 다음 줄만 실행됩니다. 위 스니펫은 두 개의 이상한 키워드를 제외하고는 간단한 JavaScript처럼 보입니다. :D

await only can be used inside an async function

제너레이터로 async await 구현

고려해야 할 몇 가지 사항

await는 약속

앞에 추가됩니다.

약속을 완료한 후 다음 줄이 실행됩니다.

const sleep = (delay) =>
  new Promise((resolve) => setTimeout(() => resolve(`sleep ${delay}`), delay));

function awaitFunc(promise) {
  promise.then((res) => iterator.next(res));
}

function* asyncFunc() {
  try {
    const result1 = yield awaitFunc(sleep(1000));
    console.log(result1);
    const result2 = yield awaitFunc(sleep(2000));
    console.log(result2);
  } catch (error) {
    console.log(error);
  }
}

var iterator = asyncFunc();
iterator.next();

위 스니펫은 async 및 await와 같은 정확한 결과를 제공합니다.
여기에서 고려

awaitFunc 약속을 수락하고 확인하고 Generator가 실행을 계속하도록 함

function* 될 async

yeild 및 awaitFunc 대기 중