#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
'Study > JavaScript' 카테고리의 다른 글
| [JavaScript] 논리 연산자로 변수에 값 할당하기 (0) | 2021.10.22 |
|---|---|
| [JavaScript] 중급 #18 - Generator (0) | 2021.10.19 |
| [JavaScript] 문자열을 배열로, 배열을 문자열로 (0) | 2021.10.08 |
| [JavaScript] 중급 #16 - 프로미스(Promise) (0) | 2021.10.02 |
| [JavaScript] 중급 #15 - 클래스(Class) (0) | 2021.10.02 |