[JS] async / await

async

async는 ES8에 도입된, 비동기 처리 방법입니다.
프라미스를 반환하기 때문에, 프라미스를 잘 알아야 합니다.

async는 함수 앞에 위치합니다.

async function f(){
    return 1
}

함수 앞에 async를 붙히면 해당 함수는 항상 프라미스를 반환합니다.
값을 반환할 때에도, 이행상태의 프라미스(resolved promise)로 감싸, 반환되게 합니다.

async function f(){
    return 1
}

f()
.then(v=>alert(v)) // 1

async는 이렇게 프라미스를 반환 하는 것 외에도 다른 기능을 제공합니다.
다른 키워드 await는 async안에서만 동작합니다.

await

await는 async함수 내에서만 동작합니다.

let value = await promise;

이처럼 사용합니다.

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때 까지 기다립니다.

async function f(){
	let promise = new Promise(resolve => {
    	setTimeout(()=>resolve(1),1000)
    })
    
    let result = await promise; // promise 이행까지 기다림
}

await는 말 그대로 프라미스가 처리될 때 까지 함수의 실행을 기다리게 만듭니다.
처리되면, 처리된 프라미스 객체의 result를 반환합니다.

promise.then()보다 좀 더 세련되게 프라미스의 result를 얻을 수 있습니다.

async function showAvatar(id){
    let response = await fetch(`xxx.com/users/${id}`);
    let user = await response.json();
    
    let img = document.createElement(img);
    img.src = user.src;
    append(img);

    await new Promise(resolve=>setTimeout(resolve,1000) );

    img.remove()
}

await는 프라미스가 아니더라도 thenalbe객체를 받을 수 있습니다.

에러 핸들링

프라미스가 정상적으로 이행됐다면, await promise는 프라미스 객체의 result를 반환합니다.
반면, 거부되면 throw문 처럼 에러가 던져집니다.

try..catch를 통해 잡거나, async함수가 거부상태가 되어, f().catch()로 잡을 수 있습니다.