Promise 체인에서 Async/Await로

JavaScript를 작성할 때 종종 다른 작업에 의존하는 작업을 처리해야 합니다. 따라서 이전 콜백 함수에 종속된 많은 중첩 콜백 함수로 끝납니다. 이것을 종종 콜백 지옥이라고 합니다.

운 좋게도 우리는 이제 우리를 도와줄 Promise라는 것을 얻었습니다.

프라미스가 뭔데🤞🤞

약속은 미래의 어느 시점에 해결되거나 거부될 수 있는 값에 대한 자리 표시자입니다.



JavaScript에서 Promise의 예를 살펴보겠습니다.

const data = (url) => {

  return fetch(url)

    .then(response => {

     if (response.status == 200) {

     return response.json();

     } else {

     throw new Error(response.status);
     }

    });

};

비동기/대기란 ♾⌛️

마지막으로 Async/Await 로 넘어갑시다! 가장 먼저 해야 할 일: Async Await는 Promise를 완전히 대체하지 않습니다.

Async/Await는 Promise 위에 구축되어 비동기 코드를 보다 편안하게 작성할 수 있게 해줍니다. 이는 약속과 콜백 외에 비동기 코드를 작성하는 새로운 방법일 뿐입니다. 그것은 또한 더 "동기식"으로 보이게 합니다.



이제 Async/Await 를 사용하여 다시 작성된 동일한 코드를 살펴보겠습니다.

const data = async url => {

    try {

     const response = await fetch(url);

     if (response.status != 200) {

     throw new Error(response.status);

     }

     const responseData = await response.json();

     return responseData;

    } catch (err) {

     // Failed to fetch the data

     throw new Error(err);

    }

};

어느 것을 더 선호 해? 제 생각에는 async/await 를 사용할 때 코드에서 어떤 일이 발생하는지 이해하는 것이 더 명확합니다.

무슨 일이야

메소드 헤더에서 키워드async를 사용하고 있음을 주목하십시오. 이것은 함수가 항상 약속을 반환한다는 것을 의미합니다. 키워드await는 메서드 헤더에 키워드async를 지정하는 경우에만 작동합니다.

키워드await는 Promise가 확정/거부될 때까지 코드를 대기하게 하고 일단 해결/거부되면 결과/오류를 반환합니다. Promise가 확정될 때까지 엔진은 다른 스크립트 실행과 같은 다른 작업을 수행할 수 있습니다.

위의 예에서 코드는 const response = await fetch(url);에서 멈추고 Promise가 해결된 후에만 계속됩니다. 즉, 일단 URL을 "가져온"것입니다. URL이 반환하는 모든 것이 상수 응답에 할당됩니다. 그런 다음 코드가 다시 시작됩니다.

Async/Await 사용의 이점?

오류 처리

동기 코드와 비동기 코드에 대해 오류 스택 및 디버깅을 동일한 구성에서 수행할 수 있습니다. 결과적으로 더 나은 오류 처리를 제공합니다. Promise를 확인하는 데 오류가 있으면 컨트롤이 오류를 처리하기 위해 catch 블록으로 이동합니다. 위에서 두 번째 코드 스니펫을 살펴보십시오.

동일한 try 블록에서 여러 약속을 래핑할 수도 있으며 코드는 하나의 약속뿐만 아니라 모든 약속의 오류를 포착합니다. 또한 오류가 발생한 위치와 약속을 알려줍니다.

깨끗하고 간결

명확하고 더 나은 코드를 작성할 수 있습니다.
이것은 단지 몇 줄의 코드만 가지고 있을 때 그렇게 명백하지 않은 이점입니다. 그러나 일단 많은 코드를 작성하기 시작하면 간결함에 많은 도움이 됩니다.

정황

코드에서 더 적은 조건부 연산자를 사용합니다. 고전적인 Promise를 사용하는 첫 번째 코드 스니펫은 간단합니다. 4개 이상의 if 문이 있다고 상상해 보십시오. 그것은 빨리 손에서 벗어납니다.

결론

이 기사에서 무엇을 기억해야 합니까?

메서드 헤더에 async를 추가하면 항상 약속을 반환합니다. 그 외에도 await 키워드를 사용할 수 있습니다. 따라서 약속이 해결될 때까지 기다릴 수 있습니다.

코드를 보다 명확하고 이해하기 쉽고 간결하게 만듭니다.

await 키워드를 사용하여 Promise가 해결되거나 거부될 때까지 코드 실행을 차단합니다.

promise가 해결되지 않으면 예외가 발생합니다.

읽어주셔서 감사합니다👨💻.