async & await tip
Promise
는 Javascript
공부를 시작하고 만난 개념중에 가장 골치 아픈 친구입니다. Promise
가 무엇인지와 async
& await
가 무엇인지 그리고 공부하면서 알아낸 팁들을 적어보려고합니다.
Promise
Promise
객체는 Javascript
에서 비동기 작업을 수행해줍니다. Promise
는 보통 서버에서 데이터를 화면에 표시할때 사용됩니다. 데이터를 다 받아오기 전에 화면에 데이터를 표시하려고 하면 오류가 나거나 아무것도 표시 되지 않습니다. Promise
는 이런 문제들을 해결하기 위해 등장했습니다.
Promise
는 세가지 상태 중 하나를 가집니다.
Pending
Pending
은 대기 중이라는 뜻으로 비동기 로직이 아직 완료되지 않은 상태입니다.
Fulfilled
Fulfilled
는 비동기 로직이 정상적으로 완료된 상태입니다.
Rejected
Rejected
는 비동기 로직이 실패하거나 오류가난 상태입니다.
Promise
는 아래와 같은 문법으로 작성됩니다.
let promise = new Promise(resolve, reject) => {
//executor
}
promise
가 선언될때 result
상태는 undefined
입니다. executor
에서 resolve(value)
가 호출되면 정상적으로 끝났을 경우 promise
가 fulfilled
상태가 되며 value
를 반환합니다. 반대로 reject(error)
가 호출될 경우 promise
의 상태가 rejected
로 변하고 result
는 error
가 반환됩니다.
async & await
async
는 일반 함수를 비동기적으로 바꿔줍니다. async
는 function
앞에 붙으며 반화값을 반드시 Promise
로 변환합니다.
async function a() {
return 1;
}
a().then(result => console.log(result))
Promise { <pending> }
>1
await
은 반드시 async
함수 안에 있어야 동작합니다. 그렇기 때문에 최상위 레벨 코드에서는 사용할 수 없습니다. await
키워드는 Promise
가 동작이 끝날 때 까지 기다려줍니다. Promise.then
와 비슷한 역할이지만 더 깔끔해서 이해를 도와줍니다.
또한 await
는 Promise
만 기다려주는 것이지 일반함수를 기다려주지는 않습니다. await
가 던진 에러를 핸들링하기 위해서는 try-catch
문을 사용할 수 있습니다.
async function a() {
try {
let response = await fetch(http://localhost:3000/asdeqx);
const user = response.json();
} catch(err) {
console.error(err);
}
}
a();
await
는 모든 Promise
를 한번에 처리하는 Promise.all
와도 잘 동작합니다.
Author And Source
이 문제에 관하여(async & await tip), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jun17114/async-await-tip저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)