프로미스를 보다 쉽게 async & await

#async

 

async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의한다.

 

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.

프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

 

예시로는 아래코드를 참조하면 된다.

//1.async사용해보기
async function fetchUser(){
    //10초후 네트워크 연결
    return('jin') 
}
const user = fetchUser();
user.then(console.log)
console.log(user)

 

 

#await

 

await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다.

프라미스가 처리되면 그 결과와 함께 실행이 재개된다.

프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

 

예시로는 아래코드를 참조하면 된다.

 

function delay(ms){
    return new Promise(resolve => setTimeout(resolve,ms))
}
async function getApple(){
    await delay(2000)
    
    return 'apple'
}

async function getBanana(){
    await delay(1000)
    return 'banana'
}
async function pickFruits(){
    const applePromise = getApple();
    const bananaPromise = getBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`
}
pickFruits().then(console.log)

여기서 중요한점은 async안에서 await가 동작을 한다는것은 중요하게 생각하고 사용해야한다.

 

 

 

#마무리코멘트

 

코딩엘리채널을 보면서 프로미스를 공부하고 async를 공부햇는데 확실히 사용하는거는 async가 편하다고 느껴진다. 간편하게 프로미스화?? 가 되기때문... 아직까지는 못외웟지만 차차 익숙해지겠지..