await, async

async, await란

간단하게 말해서 promise를 깔끔하게 사용하게 하는것.
promise는 비동기적으로 실행하는 것을 지원한다.

function fetchData() {
    const result = fetchData // 백엔드로부터 데이터를 불러오는데 5초의 시간이 걸림
    return result
}

const data = fetchData()
console.log(data)

위 코드는 비동기로 설정해주지 않았기 때문에 동기로 실행된다.
백엔드로부터 데이터를 가져오는 데 5초의 시간이 걸리기 때문에

그 다음을 실행하기까지 5초의 딜레이가 생기는 것이다.

이를 비동기로 설정해준다면, 백엔드로부터 데이터를 가져오는 동안 다음 코드를 비동기적으로 실행하기 때문에 이후 과정에 딜레이가 생기지 않을 것이다.

---

1. async

async를 함수 선언 앞에 붙여주게 되면 함수 내부는 전부 비동기로 바뀌게 된다. 함수 내부에 전부 promise가 씌워진다고 생각하면 된다.

---

2. await

async 내부에서만 사용 가능. 만약 await가 백엔드를 호출하는 함수 앞에 붙게 된다면 데이터를 가져오는 것이 완료될 때까지 기다려주게 된다.

async function getDataOne() {
    const result = await fetchData() // 데이터를 가져오는데 3초의 시간이 걸린다면 이를 기다려줌
    return result
}

async function getDataTwo() {
    const result = await fetchData() // 데이터를 가져오는데 3초의 시간이 걸린다면 이를 기다려줌
    return result
}

async function getDataThree () {
    const data1 = await getDataOne() // 3초의 시간이 걸림
    const data2 = await getDataTwo() // data1 가져온 뒤 실행. 3초의 시간이 걸림
    return `${data1}, ${data2}`
}

getDataThree().then(console.log) // 데이터를 다 가져운 뒤 콘솔에 출력 (6초 소요)

---

3. await 병렬 처리

2번 예시 코드에서 봤을 때 data1과 data2를 가져올 때 동시에 가져오면 좋을 것 같은데 data1을 가져오는 것을 기다렸다가 data2를 가져와야 하기 때문에 성능에 문제가 될 수 있다. 따라서 data1, 2를 가져오는 await를 병렬로 처리하면 좀 더 좋은 성능을 기대할 수 있을 것이다.

아래 예시처럼 Promise.all 를 사용하면 배열 안에 등록된 함수를 동시에 실행하게 된다.

async function getDataOne() {
    const result = await fetchData() // 데이터를 가져오는데 3초의 시간이 걸린다면 이를 기다려줌
    return result
}

async function getDataTwo() {
    const result = await fetchData() // 데이터를 가져오는데 3초의 시간이 걸린다면 이를 기다려줌
    return result
}

function getAllData() {
    return Promise.all([getDataOne(), getDataTwo()])
    .then(data => 
        console.log(data) // 데이터를 병렬로 가져오기 때문에 3초의 시간 소요
    )
}

getAllData().then(console.log)