17 async function과 await
비동기를 다루는 또다른 방법이다.
mdn문서 - async_function 를 보면 es2017에 표준으로 정해진것을 알 수 있다.
문서 이름은 async function으로 되어있다.
즉, async를 함수 앞 키워드로 붙이는 것이다. 이렇게 붙인 후, await도 함께 사용하는 것이다.
따라서 아래처럼 사용가능하다.
1) async function 함수이름( ) { }
2) const 함수이름 = async( ) => { }
자 그럼 본격적으로 언제 이렇게 쓰는지 알아보자!
※ async await는 Promise기반으로 하고있다.
결과값을 보게되면 SyntaxError : await is only valid in async function 라고 에러가뜬다.
이는 await를 쓰는 표현식이 즉, 평가되는 한 줄이 유효하려면 async function안에서만 유효하다는 의미이다.
19번째 줄을 보게되면, 전역 공간이기때문에 async function으로 감싸져있지 않다.
따라서 이를 해결해보도록하자!
메시지가 잘 출력된것을 확인 할 수 있다.
이렇게 async가 들어있는 함수가 있을 경우, 이 함수를 실행하면 그 안에있는 로직이 다 끝날 때까지 프로그램이 종료가 되지 않으며 중간에 한줄한줄 내려갈때 await가 걸려있으면 이게 비동기처리가 끝날때까지 기다렸다가 정상적으로 끝나면 resolve되면 이 resolve에서 넘어온 ms인자의 값을 넘겨서 아래로 계속 진행하게 되는 것이다.
async await가 좋은점은 뭘까?
어떤 비동기처리가 로직 코드에서 밑으로 흘러가게 표현 할 수 있다는 것이 가장 큰 장점이다.
이번에는 프로미스 객체가 resolve되는것이 아니고, rejected될때는 어떻게 처리되는지 살펴보자
1초 후에 error객체가 출력되는것을 확인 할 수 있다.
이런식으로 비동기 처리에서 resolve와 reject를 try catch로 처리하는 것이 일반적으로 사용하는 형태이다.
지금까지 promise객체를 new로 생성해서 return하는 형태의 function을 사용했었는데,
이번에는 그냥async function자체를 사용하는 방법을 살펴보자!
이렇게 Mark라는 문자열이 바로 Promise.resolve를 통해서 then , thenable하다는 것이다.
그게 name으로 await통해 나오고, 출력한것이다.
자, 이제 복잡하니까 자세히 한 번 살펴보자
17번째줄 main( )함수에서는 18번째줄 asyncP()함수를 await로 호출하고있다 그럼 이때 비동기를 끝낼때까지 기다렸다가 밑으로 진행이 될것인데,13번째줄의 asyncP() 또한 async키워드가 붙어 있으므로 await를 사용할 수 있는 형태이다.
그래서 그 안에서 14번째 줄 추가를 해준 후
실행을하게된다면
이와 같은 흐름으로 진행이된다.
8번째줄 그래서 reject말고, 7번째줄 resolve로 진행을 해보면 ,
Mark가 return돼서 출력이 됐는데 이번에는 asyncP( )로 갔다가 asyncP( )가 4번째 줄 p(ms)로 가서 resolve될때까지 기다렸다가 resolve된 다음에 문자열로 return이 되는 것이다.
결과값이 잘 출력 되는것을 확인 할 수 있다.
이번에는 reject를 했을때를 살펴보자!
이제 결과값을 보면 1초있다가 Error : reason이라고 잘 찍히는 것을 확인할 수 있다.
이부분을 참고하면 이제 , error를 어디서 처리해야되는지를 컨트롤해서 처리할 수 있게 된다.
즉,
23번째줄, main()에서 sayncP()라고 하는 비동기 함수를 호출하면서, 그 밑에서 일어나는 모든 일들을 전부다 main()안에 있는 try catch에서 해결하는 방식으로 되어있으며,
12번째줄, 만약 asyncP에서 어떤 error를 처리한 다음에 그냥 정상적인 결과를 보내고 싶다면 13번째 줄의 await p(1000);을 호출할때 try catch로 감싸서 error에 대한 처리를 하고 정상적으로 밑으로 흘러서 return될 수 있게 한다.
이번에는 try catch로 처리가 된 후 마지막에 항상 실행 할 로직을 사용할때의 finally를 설정해보자.
25번째줄의 finally가 추가된것을 확인하여 결과값 확인하기
이번에는 연속된 Promise로 된 처리와 연속되는 async await으로 되는 처리에 대해서 비교해보자.
Promise의 비동기가 연속돼서 진행되는 처리와 async await에 연속된 비동기처리는 이와같이 조금 다르다.
따라서 Promise는 뭔가 계속 리턴해서 체이닝같은 느낌이고,
async await는 한줄한줄이 비동기가 끝나면 진행이 된다는 느낌으로 진행이 되는 느낌이기 때문에
(주관적으로) async await를 사용하면 로직의 이동이 계속 한줄한줄과 그 순서가 맞아 들어가는것이다...그래서 개인적으로 굉장히 좋아한다<- 라고 강사님이 말씀하셨다.
따라서 이러한 차이점을 알고 사용하면 좋을 것 같다.
쟈! 이제 마지막으로 Promise할때 배웠던 Promise.all 과 Promise.race의 경우
async await로 어떻게 처리하는지 살펴보자
비동기 처리함에 있어서 굉장히 중요한 요소로 자리잡고있는것이 async await이다.
es2017이지만 중요한 문법이다.
참고자료 :
최근댓글