[javascript] promise와 async/await

 

 

 

---

 

Promise와 async & await을 쓰는 이유

 

객체를 사용하기 전에 항상 이 객체나 함수를 왜 사용하는지를 알아야 다음에 이용할 때나 사용할 때 쓰임새에 맞게 사용할 수 있게 됩니다. 

 

promise

동기적으로 처리되는 자바스크립트에서 비동기로 연산을 처리할 때 사용하는데

 

이런식으로 콜백함수안에 콜백함수를 넣고 진행하는 콜백지옥이라는 것에서 벗어나기 위해서 사용하기 시작했습니다.

 

위의 식은 

이런식으로 나오게 됩니다.

흐름을 처리하기 어렵게 된다는 점이 있습니다.

 

 

 

 

async/await

비동기러리패턴의 최신문법으로 promise에서 콜백함수를 다루는 방법에서 비동기적 사고 방식을 벗어나게 도와줘 좀 더 동기적인 코드처럼 작성할 수 있게 도와줍니다. (반환 값을 변수에 할당)

 

---

Promise

 

 

이유만 봤을 때는 비동기처리방식으로 사용할 때 좀 더 효율적으로 사용하기 위해서 사용한다고 볼 수 있는데 자세히 한번 알아보겠습니다.

 

promise는 선언과 실행 두 부분으로 나누어 지는데

 

promise를 사용하면 최종 결과를 반환하지 않고 프로미스를 반환해서 미래에 시점에 결과를 제공합니다.

 

그래서 상태를 가지게 되는데 그 상태에는 3가지가 있습니다.

 

promise의 상태

pending	아직 수행중인 상태
fulfilled	정상적으로 수행된 상태
rejected	정상적으로 수행 못한 상태

 

그리고 그 상태에 맞는 반환부에는 promise.then()과 promise.catch()문으로 반환 값을 연결할 수 있습니다.

 

이 둘을 실행 부분이라고 할 수 있는데

 

then

API의 한 종류로 정상적으로 작업이 완료되었을 때 결과에 따라 안에 있는 내용을 실행합니다.

 

catch

API의 한 종류로 try-catch문에서 catch의 역할과 같이 작업 중 에러가 나오면 실행시킬 내용을 넣어주면 됩니다.

 

간단한 예제 코드로 알아보면 일단 promise 선언을 함수의 반환값에 넣어준 후에

 

resolve와 reject 파라미터로 넣어줍니다.

 

여기서 resolve는 성공 시 실행하는 함수이고 reject는 오류 발생 시 실행하는 함수입니다.

 

🤩아까 선언부에서의 pending상태는 promise 생성 직후 ~ resolve나 reject 함수가 호출되기 전까지의 상태입니다.

 

위의 코드에서는 setTimeout()을 이용해 간단하게 비동기를 구현하고  resolve는 해결이라는 문자열을 전달 reject는 실패ㅠㅠ라는 문자열을 전달했습니다.

 

그리고 promise에 true값을 주어 resolve의 성공이라는 문자열이 실행될 것입니다.

 

promise의 then은 연속적으로 사용이 가능하며 then에 따른 catch도 사용이 가능합니다.

 

---

 

async & await

 

비동기 처리 패턴의 신흥강자인 async & awit은 서버에서 데이터를 받아오는 역할이나 서버에 데이터를 전

 

달하는 과정에서 코드의 실행 순서를 보장받기 위해서 쓰기 정말 좋은 패턴이라는 생각이 들었습니다.

 

위가 async 아래가 promise

간단한 예를 보았을 때 위의 코드가 더 간결하다는 것이 느껴지시죠

 

콜백함수로 길어질 수 있는 함수를 간소화시켜주는 async 와 await입니다.

 

 

 

일단 사용하는 방법은

 

 

이런식으로 함수앞에 async를 붙여주고 비동기로 진행할 식에 await를 붙여주면 끝입니다. 너무 간단하다!

 

이 식을 해석하면 서버에서 사용자의 데이터를 불러와 변수에 담고 사용자의 성이 김일때 사용자의 성을 출력한다라는 식입니다.

 

이렇게 서버에서 데이터를 불러올 때 사용하는 비동기방식을 간단하게 표현할 수 있습니다.

 

 

😲여기서 주의할 점은 fetch나 Axious같은 프로미스를 반환하는 호출 함수를 받는 코드에 await를 붙여 줘야 한다는 점입니다.

 

마지막으로 async와 await의 예외처리는 try-catch문으로 실행하는데

 

저희가 실행할 본문을 try에 넣어주고

 

오류가 있을 때 실행할 본문은 catch에 넣어주시면 됩니다.

 

 

 

결론적으로

 

async와 await은 promise로 반환하는 함수를 받아 콜백함수나 .then과 .catch같은 것을 사용하지 않고도promise로 반환한 값을 변수에 할당하여 처리 or 바로 처리 할 수 있다는 것입니다.

 

 

 

 

 

 

 

 

 

 

 

---

 

참고한 페이지들

이해가 안되신다면 이 페이지들도 들어가서 보시면 좋을 것 같습니다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function - JavaScript | MDN

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

 

joshua1988.github.io/web-development/javascript/js-async-await/#%EA%B8%80%EB%B3%B4%EB%8B%A4-%EB%8D%94-%EC%89%BD%EA%B2%8C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%98%A8%EB%9D%BC%EC%9D%B8-%EA%B0%95%EC%A2%8C

자바스크립트 async와 await