[JavaScript] 비동기 처리 - Async / Await이란 무엇인가?

비동기 처리의 중요성

시간이 걸리는 코드를 비동기 처리하지 않으면 문제가 발생할 수 있음

Ex) 서버에서 Data를 받아와서 출력해야 하는 상황에 비동기 처리를 하지 않으면
Data를 받을때 까지 기다리며 다음 코드들도 기다리게 됨

 

동기, 비동기 차이 예시

 

---

Promise의 문제 점

체이닝(.then .then .then ...)을 계속하다 보면 코드의 가독성이 떨어짐

---

Async / Await

비동기 처리방식인 콜백 함수와 프로미스(promise)의 단점을 보완

비동기 처리 패턴 중 가장 최근에 나온 문법

프로미스를 간결하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API

Async를 사용하면 함수의 코드 블록이 자동으로 Promise로 변환 됨

---

Async / Await 사용 방법

function 앞에 async 키워드

Promise를 리턴하는 모든 비동기 함수 호출부 앞에는 await 키워드

const getApi = async () => {
    const user = await fetch('domain.com/');
    ...
}

try - catch 구문 사용 가능

const getApi = async () => {
    const user = await fetch('domain.com/');
    ...
    try{
    	...
	}
    catch (err) {
    	console.log(err);
    }
}