[Javascript] async / await

async await 를 사용하면 promise 에 then 메서드를 사용하여 체인형식으로 호출하는 것 보다 가독성이 좋아짐

 

 

▶ async

• function 앞에 사용
• async 를 붙이면 해당 함수는 항상 Promise 를 반환.

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

console.log(getName()); //Promise{fulfilled : "mike"}

 

함수 호출 후 then 사용 가능

async function getName(){
	return Promise.resolve("Tom");
}

getName().then(name=>{
	console.log(name); //Tom
});

 

함수 내부에서 예외가 발생하면

rejected 상태가 반환된다.

catch 로 에러 잡기

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

getName().catch((err)=> {
	console.log(err);
});

 

 

 

▶ await

await 키워드는 async 함수 내부에서만 사용가능하다 (일반 함수에서 사용하면 에러 발생)

await 오른쪽에는 promise 가 오고 promise 가 찾아질때까지 기다림

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

async function showName(){
	const result = await getName('Mike');
    console.log(result); 
}
//getName() 함수로 가져온 값(name)을 기다렸다가(await) 변수 result 에 넣는다 


showName(); //1초 후에 console 에 Mike 가 찍힘

 

 

ex )

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

const f2 = (message) => {
	console.log(message); // 1초 후 "1번 주문완료" 찍힘
	return new Promise((res, rej) => {
		setTimeout(()=>{
        	res("2번 주문완료");
        },3000);
	});
};

const f3 = (message) => {
	console.log(message); // 3초 후 "2번" 주문완료 찍힘
	return new Promise((res, rej) => {
		setTimeout(()=>{
        	res("3번 주문완료");
        },2000);
	});
};

async function order(){
	const result1 = await f1(); //1번 주문완료
    const result2 = await f2(result1); //2번 주문완료
    const result3 = await f3(result2); //3번 주문완료
    
    console.log(result3); 
    //1번 주문완료
    //2번 주문완료
    //3번 주문완료
}

order();

 

중간에서 rej 가 되면 에러와 함께 실행이 중지된다.

이때 Promise 에서는 catch 를 사용했었는데,

여기서는 async await 를 try-catch 로 감싸주면 된다

async function order(){

	try{
    	const result1 = await f1(); //1번 주문완료
    	const result2 = await f2(result1); //2번 주문완료
    	const result3 = await f3(result2); //3번 주문완료
        console.log(result3);
    }catch(e){
    	console.log(e);
    }
    console.log("종료");
}
order();

 

위의 코드에  Promise.all 을 사용해서 코드를 간추려보겠다

async function order(){
	try{
    	const result = await Promise.all([f1(),f2(),f3()]);
        console.log(result); //["1번 주문완료","2번 주문완료","3번 주문완료"]
    }catch(e){
    	console.log(e);
    }
    console.log("종료");
}