Promise
A promise is an object that may produce a single value some time in the future
JavaScript는 싱글 스레드 언어이다. 싱글스레드인 만큼 한 번에 하나의 작업 밖에 수행할 수 없다는 의미이다.
즉, 처리 시간이 오래 걸리는 동작을 수행하는 동안 다른 동작을 미리 수행 시키고, 동시에 동작이 되는 듯한 느낌을 주는 것이다.
이러한 비동기적 처리를 하기 위해 JavaScript에서는 Promise 를 활용한다.
Promise states
Promise는 3가지의 상태를 가지고 있다. 상태 는 프로미스의 처리 과정을 의미한다.
- Pending(대기): 비동기 처리 로직이 아직 완료되지 않았음.
- Fulfilled(이행): 비동기 처리가 완료 됐으며 Promise의 결과를 반환 했음.
- Rejected(실패): 비동기 처리가 실패했음.
Pending
// new Promise()를 호출하면 pending상태가 됨
new Promise()
// callback을 파라미터로 받으며 callback의 파라미터는 reslove와 reject 임
new Promise(function(resolve, reject) {
// ...
})
Fulfilled
new Promise(function(resolve, reject) {
// reslove를 호출하면 fulfilled 상태가 됨
resolve()
})
function doSomething() {
return new Promise(function (resolve, reject) {
const hello = "hi"
resolve(hello)
})
}
doSomething().then(function(hello) {
// hi
console.log(hello)
})
Rejected
function doSomething() {
return new Promise(function (resolve, reject) {
// reject를 호출하면 Promise의 상태가 실패가 됨
reject(throw new Error("Fail"))
})
}
// 이 때 catch로 받음
doSomething().then().catch(function (e) {
// Fail
console.log(e)
})
처음 JavaScript를 활용하여 비동기 데이터를 가져오는 과정에서 꽤 골치아팠던 경험이 있다.
이러한 Promise 의 동작 원리를 제대로 파악하지 못해 나의 console에는 항상 Pending이 적혀 있었던 기억이 있다.
비동기의 동작을 잘 이해하여 데이터를 주고 받는 과정에서 어지러운 경험을 겪지 않도록 잘 활용하자.
'IT > JavaScript' 카테고리의 다른 글
axios (0) | 2022.10.08 |
---|---|
async / await (0) | 2022.09.30 |
Static (0) | 2022.09.12 |
Optional chaining (0) | 2022.08.29 |
Shallow copy && Deep copy (0) | 2022.08.11 |