2021 프론트 엔드 로드맵 따라가기/JS
ES7 Async & Await
알 수 없는 사용자
2021. 6. 9. 22:54
ES7에 추가된 기능으로 함수 앞에 async 키워드를 붙여 해당 함수가 Promise 객체를 리턴하도록 합니다.
따라서 비동기처리를 좀 더 간결하게 할 수 있습니다.
await 키워드는 async 키워드가 붙은 함수 내부에서 Promise 객체 앞에 쓰이며, 해당 Promise 객체가 비동기 작업을 완료할 때 까지 기다립니다.
async function myFunc() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Hello"), 1000);
});
const error = false;
if (!error) {
// 해당 promise 객체가 resolve 될 때까지 기다린다.
const res = await promise;
return res;
} else {
await Promise.reject(new Error("Something went wrong"));
}
}
myFunc()
.then(res => console.log(res))
.catch(err => console.error(err));
async function getUsers() {
// await response of the fetch call
const response = await fetch("https://jsonplaceholder.typicode.com/users")
// Only proceed first promise is resolved
const data = await response.json();
// only proceed second promise is resolved
return data;
}
getUsers()
.then(user => console.log(user));