async/await

async & await

• 비동기 처리 패턴 중 가장 최근에 나온 문법
• 기존 비동기 처리 방식인 콜백함수, Promise의 단점을 보완하고 읽기 좋은 코드를 작성하도록 도움을 줌.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

→ 함수 앞에 예약어 async를 붙이고, HTTP 통신을 하는 비동기처리 코드 앞에 await를 붙인다. (비동기처리 메서드가 반드시 프로미스 객체를 반환해야 await가 의도한대로 동작함)

 

 

ex) 서버에서 사용자 데이터를 불러와서 user 변수에 담고, user id가 1이면 사용자 이름을 출력해보자.

// 비동기처리를 콜백으로 안해도 된다면..
function logName() {
	var user = fetchUser('domain.com/users/1');
    if (user.id === 1) {
    	console.log(user.name);
    }
}

↓

 

위와 같이 작성하기 위해선 다음과 같이 async/ await을 붙여 사용해야 한다.

async function logName() {
	var user = await fetchUser('domain.com/users/1');
    if (user.id === 1) {
    	console.log(user.name);
    }
}

 

 

 

 

---

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await