68. Async & Await | 비동기 처리 패턴의 최신 문법

Async & Await 

- 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법.

- Promise, collback 에서 주는 단점을 해결

- 자바스크립트의 비동기적 사고 방식에서 벗어나 동기적(절차적) 으로 코드 작성 가능

---

기본 문법

async function fetchData(){
	await getUserList();
}

async 함수는 함수의 앞에 async를 붙여주고 

함수의 내부 로직중 비동기 처리 로직 앞에는 await를 붙여주면 된다.

좀 더 정확하게는 Promise 객체를 반환하는 API 호출 함수 앞에 await 붙이면 된다.

---

기본 예제

async function fetchData(){
	var list = await getUserList();
    console.log(list);
}

function getUserList(){
	return new Promise(function(resolve, reject){
    	var userList = ['user1','user2','user1'];
        resolve(userList);
    });
}

fetchData(); //['user1','user2','user1']

1. fetchData() 함수에서 getUserList() 함수를 호출하고 나면 Promise 객체가 반환.

2. 그리고 그 Promise는 실행이 완료된 상태(resolve)이며 실행의 결과로 userList 배열을 반환하고 있다.

3. 따라서 fetchData() 함수를 호출하면 userList의 배열이 출력된다.

---

API를 한번 호출 했을때 보다 복잡한 시나리오가 들어가는 순간 Async & Await가 정말 직관적이고,

Async & Await를 사용했을때 우리가 비동기적인 사고를 하지 않아도 되는것을 공감할 수 있다.