[WEB] Promise & Async/Await
CallBack Hell : 기능에는 문제가 없지만 코드의 가독성 저하
Promise
Prototype
- PromiseState : Status
- PromiseResult : Value
Status
- 대기(Pending) : 이행하거나 거부되지 않은 초기 상태
- 이행(Fulfill) : 연산이 성공적으로 완료된 상태(=resolve)
- 거부(Rejected) : 연산이 실패한 상태(=reject)
new Promise(resolve, reject) => {
try {
const data = /* do task */;
resolve(data) // if success
} catch(e) {
reject(new Error(e)) // if error
}
})
Methods
- .then() : resolve 상태일 때 호출
- .catch() : reject 상태일 때 호출
- .finally() : 무조건 호출
Process
vs CallBack
- CallBack
- Promise
Async / Await
async
와await
키워드를 통해 promise를 반환하는 비동기 함수를 생성 가능
Process
-
'Before function!'이 출력된 후 myFunc()이 실행
-
one 함수가 호출되고 Promise에서 resolve를 반환된 후 await 키워드를 만나 async함수가 일시 중지 된 후 Call Stack에서 Microtask Queue로 전달
-
async 함수에서 나와 나머지 코드를 계속 실행
-
남은 작업이 없는 것을 확인 후 event loop에서 대기 중인 queue를 확인하여 Call Stack에서 중단 된 위치에서부터 계속 실행
출처: JavaScript Visualized: Promises & Async/Await, https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
Author And Source
이 문제에 관하여([WEB] Promise & Async/Await), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@idhyo0o/WEB-Promises-AsyncAwait-ivmjobd5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)