2월 9일 자 학습 내용 정리입니다.
✅ Promise
Promise는 비동기 작업을 표현하는 자바스크립트의 객체로 비동기 작업의 진행(pending), 성공(fulfilled, resolved), 실패(rejected) 상태를 표현한다.
즉, 비동기 처리의 순서를 표현할 수 있다.
let error = false;
const promise = new Promise((resolve, reject) => {
if(!error) resolve("success");
else reject("error");
});
Promise의 생성자는 new Promise(callback)
이며 callback 함수는 resolve와 reject의 두 가지 인자를 받는다.
Promise가 성공하면 resolve를 호출하고 실패하면 reject를 호출한다.
promise
.then(data => {
console.log("success ", data)
})
.catch(e => {
console.log("error ", e.message)
})
.finally(() => {
console.log("상관없이 실행")
})
성공 시 then()
에 실행할 콜백 함수를 인자로 넘기고 실패시 catch()
에 실행할 콜백 함수를 넘긴다.
이때 then(callback1, callback2)
로 callback1 자리에 성공, callback2 자리에 실패 메서드를 한꺼번에 인자로 넘길 수 있다.finally()
는 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
Promise API는 비동기 API 중 하나로 task queue가 아닌 job queue(또는 microtask queue)를 사용한다.
job queue는 task queue보다 우선순위가 높다.
✔️ Promise Method Chain
then/catch 메서드는 또 다른 Promsie를 리턴한다.
즉, 비동기 코드에 순서를 부여하는 것이다.
이렇게 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(chaining)이라고 하며 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다.
✔️ Promise.resolve, Promise.reject, Promise.all
Promise.resolve("success").then(console.log)
// success
// Promise {<fulfilled>: undefined}
Promise.reject("error").then(console.log)
// Promise {<rejected>: 'error'}
// Uncaught (in promise) error
Promise.resolve()
는 성공한 Promise를 바로 반환하고 Promise.reject()
는 실패한 Promise를 바로 반환한다.
이를 통해 인위적으로 Promise 메서드 체인을 만들 수 있다.
비동기 코드로 진행해야 하는 상황 등에 유용하게 사용할 수 있다.
Promise.all([promise1, promise2, promise3])
.then(data => {
console.log("모두 성공", data)
})
.catch(e => {
console.log("하나라도 실패", e.message)
})
Promise.all()
은 Promise 배열을 받아 모두 성공시 각 Promise의 resolved 값을 배열로 반환한다.
하나라도 실패한다면 가장 먼저 실패한 Promise의 실패 이유를 반환한다.
'엘리스 AI 트랙 4기 > elice AI track' 카테고리의 다른 글
[4주차] HTTP와 API (0) | 2022.02.11 |
---|---|
[4주차] async/await (0) | 2022.02.11 |
[4주차] 자바스크립트 제어 흐름 (0) | 2022.02.09 |
[3주차] 자바스크립트의 내장객체 (0) | 2022.01.30 |
[3주차] 자바스크립트 엔진과 Hoisting (0) | 2022.01.29 |
댓글