async, await

async

정의

async는 비동기 함수를 정의할 때 사용하는 키워드이다.
async로 명명한 함수들을 항상 Promise 객체를 반환하며, 비동기 작업이 완료되면 해당 Promise가 resolve되고, 오류가 발생하면 해당 Promise가 reject상태가 된다.

작성법

Promise 리턴 확인

1. Promise 객체를 직접 생성하여 비동기 처리
function getName(){
 return new Promise((resolve,reject) =>{
 	resolve("Jake");
 }); 
}

2.async를 활용한 비동기 처리
async function getName(){
	return "Jake";
}

console.log(getName());

2-1.화살표 함수를 이용한 async 함수
const getName = async() =>{
	return "Jake"; 
}

3.async 사용 후 rejected
async function getName(){
	throw new Error();
}

getName();

Promise 리턴값 사용

async function getName(){
	return "Jake";
}

getName().then((result)=>{
    console.log(`너의 이름은 ${result}`);
})

예외, reject

async function getName(){
	throw new Error("error");
}

getName()
.then((result)=>{
    console.log(`너의 이름은 ${result}`);
})
.catch((error)=>{
    console.log(error);
})

await

async 함수 내부에서는 await 키워드를 사용하여 Promise가 리턴될 때까지 대기할 수 있다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다.

비동기함수, Promise를 리턴하는 함수들이 수행되고 난 후 다음 코드들을 실행시킨다.
==> async 함수 내부에서 Promise를 리턴하는 함수들이 실행될 때 까지 기다린다.

async, 비동기 함수가 아닌경우 await사용 --> 에러발생

작성법

await 사용

function getName(name){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name);
        },3000);
    });
};

async function showName(){
    console.log("시작");
    const result = await getName("Jake");
    console.log(result);
}

showName();

await 사용 X

function getName(name){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name);
        },3000);
    });
};

async function showName(){
  	console.log("시작");
    const result = getName("Jake");
    console.log(result);
}
showName();

3초후 fullfilled 상태인 Promise 객체를 result값을 리턴하는 것이 아니라 브라우저가 로딩되는 동시에 pending 상태의 Promise를 바로 받은 후 console에 결과값을 출력한다.

예제

정상 흐름

const f1 = (message) =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("1번 주문 완료");
        },1000);
    });
};

const f2 = (message) =>{
    console.log(message);
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("2번 주문 완료");
        },3000);
    });
};

const f3 = (message) =>{
    console.log(message);
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("3번 주문 완료");
        },2000);
    });
};

async function order (){
    console.log("시작");
    const f1Result = await f1();
    const f2Result = await f2(f1Result);
    const f3Result = await f3(f2Result);
    console.log(f3Result);
    console.log('주문 완료');
}

order();
-------------------------------------------
f1().then((result)=>f2(result))
    .then((result)=>f3(result))
    .then((result)=>console.log(result))
    .finally(()=>{
        console.log("끝");
    });

예외 발생

const f1 = (message) =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("1번 주문 완료");
        },1000);
    });
};

const f2 = (message) =>{
    console.log(message);
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject(new Error('에러 발생'));
        },3000);
    });
};

const f3 = (message) =>{
    console.log(message);
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("3번 주문 완료");
        },2000);
    });
};

async function order (){
    try{
        console.log("주문 시작");
        const f1Result = await f1();
        const f2Result = await f2(f1Result);
        const f3Result = await f3(f2Result);
        console.log(f3Result);
    } catch(e){
        console.log(e);
    }
  	console.log('종료');
}
order();

2번 주문에서 에러가 발생하고, catch문으로 들어가기 때문에 아래 코드 부터는 실행이 안된다.

출처 : 인프런 코딩앙마