비동기적인 작업을 사용자가 컨트롤하게 해주는 Promise.
콜백지옥을 벗어나기 위한 방법이지만, 이 Promise도 체이닝이 반복되면 또 다른 지옥에 빠지기 쉽상이다.
그래서 ES7(ES2017)에 추가된 것이 Async&Await!
Promise 코드를 좀 더 직관적으로 보이게 도와주는 Syntactic sugar다.
function promiseFunc(){
return new Promise((resolve, reject) => {
resolve("안녕, 안녕!")
});
}
↓
async function asyncFunc(){
return "안녕, 안녕!"
}
함수 앞에 async를 붙여주면 Promise 객체를 생성하여 리턴하지 않아도 Promise를 리턴한다.
async function getUserName(idx){
const getUser = await fetch(`uri~~/${idx}`);
const user = await getInfos.json();
return user.name;
}
promise를 리턴하는 비동기 함수 앞에 await을 붙여줬다.
이렇게 하면 결과 값을 얻기 전까지 기다린 다음에 다음 라인으로 넘어 간다.
코드를 직관적이고 동기적으로 작성할 수 있다.
Promise를 사용할 시에는 then, catch 로 예외 처리를 하지만
async&await을 사용하면 동기, 비동기 구분 없이 try/catch문으로 예외 처리를 할 수 있다.
async function getUserName(idx){
try {
const getUser = await fetch(`uri~~/${idx}`);
const user = await getInfos.json();
return user.name;
} catch(err){
console.error(err);
}
}
흙흙 제대로 이해해 두면 정말 행복할 것 같은 Async&Await...🤔
현재, 콜백으로 처리해 둔 API호출 코드를 수정하는 것부터 성공해보자...!
끝으로 언제나 지대한 도움을 받고 있는 드림코딩 엘리님,,,☆
잘 보고 갑니다! 아주 유익한 내용이네요! []~( ̄▽ ̄)~*