본문 바로가기

IT/JavaScript

Promise

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