[자바스크립트_개념정리] Async & Await

Async & Await

비동기 작업을 동기적 작업처럼 한줄 한줄 수행하도록 코드 작성 가능

then()과 catch()를 써도 가독성이 좋지는 않은데

Async / Await으로 한번 더 축약해서

프로미스 체이닝 then()보다 훨씬 가독성이 높다!

Async

비동기 함수를 정의할 때 사용하는 키워드

함수 앞에 async를 붙여주면 Promise를 반환하는 비동기 함수로 변함

값이 Promise로 감싸져 반환됨

Await

async함수 안에서 어떤 비동기 함수가 완료되기를 기다려야 한다면 그 함수 앞에 await 키워드를 붙임

비동기 동작을 잠깐 멈추게 할 수 있음

await은 항상 async와 함께 쓰임

then의 역할과 유사

, 코드가 왼쪽부터 실행되는게 아니고 오른쪽에서 왼쪽으로 실행된다고 생각하면 됨

[ async & await 활용 ]

=> 2초 뒤 비동기 작업이 실행되는 promise를 리턴하는 networkRequest 함수.

networkRequest 함수가 완료되길 기다린 후(2초) 각각의 값을 리턴하는 getUser()와 getTodo()

=> getUser함수가 값을 반환하는데 걸리는 2초가 지나 ‘민주’가 출력되는데

이 작업이 완료될 때까지 기다린 후에 getTodo함수가 실행된다

마찬가지로 값 반환에 걸리는 2초가 지난 후 getTodo함수가 반환한 배열이 todo에 저장되어 출력됨으로

모든 값이 출력되기 위해서는 4초가 걸린다

에러 처리

Async/Await은 reject를 처리할 수 없기 때문에 reject는 try{resolve} catch{reject} 구문을 활용

=> getUser함수의 비동기 작업에 에러가 발생

=> user라는 변수를 선언하고, getUser함수가 반환하는 값을 저장

=> getUser함수의 비동기 작업에 에러가 발생할 경우 에러가 catch문에 전달되고, 값을 ‘익명’으로 대체