[JavaScript] 중급 #17 - async, await

 

#16 프로미스에서 .then 메소드를 chain 형식으로 호출하는 것보다 async, await을 사용하면 가독성이 좋아진다.

 

async

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

getName().then((name) => {
	console.log(name); // Angel 출력
});

 

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

getName().catch((err) => {
	console.log(err); // Error: err.. 출력
});

 

 

await: async 함수 내부에서만 사용 가능하고, 그 외에는 에러 발생

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

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

console.log("시작");
showName();

// “시작” 출력하고 1초 뒤에 “Angel” 출력

  →  result에 getName 함수에서 resolve된 값을 기다렸다가 넣어줌

 

 

#16에서 작성했던 부분을 async, await으로 수정

// #16에서 작성했던 부분

f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log(‘err’))
.finally(() => {
	console.log(‘끝’);
})

 

// async, await으로 수정

async function order() {
	try {
    	const result1 = await f1();
        const result2 = await f2(result1);
        const result3 = await f3(result2);
        console.log(result3);
    }
    catch (e) {
    	console.log(e);
    }
    console.log(‘끝’);
}

order();

// async, await 함수 내부에서 비동기 함수를 병렬로 실행

async function order() {
	try {
    	const result = await Promise.all( [f1(), f2(), f3()] );
        console.log(result);
   	}
    catch (e) {
    	console.log(e);
    }
    console.log(‘끝’);
}

order();

 

 

 

 

 

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17