Promise cahin이 너무 복잡하게 연결되면 가독성이 좋지 않다.
그래서 간단하게 하기 위해서 async await을 사용한다.
async await을 사용하면 동기식으로 코드를 작성하는 것처럼 비동기 코드를 간편하게 작성할 수 있다.

async await은 새로운 것을 추가하는 것이 아니라 존재하는 것 위에 덧붙여 간편하게 쓸 수 있도록 해준다.
이를 syntatic sugar이라고 한다.

1. async

function fetchUser(){
      //do network request in 10 secs...
    return new Promise((resolve, reject)=>{
        resolve('ellie');
    })
}

const user = fetchUser();
user.then(console.log);
console.log(user);

promise 안에는 resolve나 reject를 이용해줘야한다. 하지만, 좀 더 간단하게 비동기를 작성해주는 방법이 있다. 함수 앞에 async를 붙여주면 된다. 그러면 resolve, reject등을 사용하지 않아도 비동기 방식으로 처리할 수 있다.

async function fetchUser(){
    //do network request in 10 secs...
        return 'ellie';
}

const user = fetchUser();
user.then(console.log);
console.log(user);

async라는 키워드를 쓰면 자동으로 Promise 블럭으로 바뀌게 된다

2. await

await은 async가 붙은 함수 안에서만 사용할 수 있다.
await을 쓰면 끝날 때 까지 기다려준다.

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
    await delay(3000);
    return 'apple';
}

async function getBanana(){
    await delay(3000);
    return 'banana';
}

동기적인 코드를 쓰는 것처럼 작성할 수 있다. delay가 끝나면 바나나를 반환해~ 하며 쓸 수 있다.

getBanana를 체이닝으로 쓰면 다음과 같이 쓸 수 있다.

function getBanana(){
    return delay(3000)
    .then(()=>"banana");
}

바나나와 사과를 한번에 다 따오는 함수이다.

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
    await delay(1000);
    return 'apple';
}

async function getBanana(){
    await delay(1000);
    return 'banana';
}


function pickFruits() {
    return getApple().then(apple => {
            return getBanana().then(banana => `${apple} + ${banana}`);
});
} //version 1 - 콜백지옥의 위험이 있음


async function pickFruits(){
const apple = await getApple();
const banana = await getBanana();
return `${apple}+ ${banana}`}; //version2

pickFruits().then(console.log); 

에러처리도 해보자

async function pickFruits(){
try{
	const apple = await getApple();
	const banana = await getBanana();
}catch(){}
	return `${apple}+ ${banana}`}; //version2

3. await 병렬처리

위에 코드는 사과를 받는데 1초, 바나나를 받는데 1초 걸리니 순차적으로 진행하게 되면 비효율적이다.
바나나와 사과를 받아오는 것은 서로 연관이 없기 때문에 기다릴 필요가 없다.
병렬적으로 받아오도록 수정해보자.

• apple promise를 만들고 바로 promise 안에 있는 코드 실행
• banana promise를 만들고 바로 promise 안에 있는 코드 실행

이러한 방식으로 사과와 바나나를 동시에 따서 한번에 출력할 수 있도록 한다.

async function pickFruits(){
	const applePromise = getApple();
	const bananaPromise = getBanana();
	const apple = await applePromise;
	const banana = await bananaPromise;
	return `${apple} + ${banana}`;
}

사과와 바나나를 동시에 따서 한번에 출력할 수 있도록 해준다. 동시 다발적으로 실행할 수 있다.

4. 유용한 Promise 메서드

function pickAllFruits(){
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);
//한번에 애플, 바나나를 따는 코드

function pickOnlyOne(){
    return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);
//가장 먼저 딴 것을 출력하는 코드

promise.all

주어진 모든 프로미스가 이행하거나, 한 프로미스가 거부될 때까지 대기하는 새로운 프로미스를 반환

promise.race

주어진 모든 프로미스 중 하나라도 처리될 때까지 대기하는 프로미스를 반환