[JavaScript] 프로미스(Promise)

프로미스(Promise)

: 프로미스(promise) 객체는 비동기 작업에 대한 약속이다. 비동기 작업 이후 발생할 완료 또는 실패, 그리고 그 결과값을 나타낸다.

 

비동기 작업이란?

: 언제 끝날지 알 수 없는 작업. 작업의 상태가 시작, 진행중, 완료 인 것과 무관하게 프로그램은 게속해서 실행되어야 한다.

 

프로미스 생성방법

 

1. 다음과 같은 비동기 작업을 수행하는 함수가 있다.

() => {
    console.log("비동기 함수라고 치자")
}

2. 이를 Promise 객체를 생성하면서 인자로 전달한다.

new Promise(() => {
    console.log("비동기 함수라고 치자")
})

3. Promise 객체에 전달된 함수는 두 가지 콜백 함수를 인자로 받는다.

하나는 작업 성공 시 실행된느 함수(resolve), 하나는 실패 시 함수(reject)

new Promise((resolve, reject) => {
    console.log("비동기 함수라고 치자")
})

4. 여기에 변수를 선언하여 프로미스 생성 완료

const promise = new Promise((resolve, reject) => {
    console.log("비동기 함수라고 치자")
})

 

-> 성공 시 콜백함수와 실패 시 콜백 함수는 비동기 작업으로부터 값을 반활할 수 있다.

const isSuccess = true;
new Promise((resolve, reject) => {
    if(isSuccess){ resolve("성공") }
    else{ rejcet("실패") }
})

위 코드의 경우 비동기 작업으로부터 "성공"이 반환된다.

 

-- 비동기 작업 완료 후(성공 또는 실패) 이를 처리하기 위해 체이닝(chaining)을 이용하여 해결한다.

// then은 성공했을 때, catch는 실패했을 때
promise.then((res) => {
    console.log(res)
}).catch((rej) => {
    console.log(rej)
})

then : 성공헀을 때 할일을 정하는 메소드 (이때 인자로 반환값을 받는다)

catch : 실패헀을 때 할일을 정하는 메소드 (이때 인자로 반환값을 받는다)

 

예제)

// setTimeout : 일정 시간 지난 후에 단! 한번! 만 실행될 동작 지정
const delayPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("3초후 생성")
        resolve("3000") // 비동기 작업 무사 완료, 3000반환!
    }, 3000)
})
delayPromise.then(resolveValue=>{
    console.log("성공 했다면, 그 값은 : " + resolveValue)
})
console.log("!")
console.log("!")
console.log("!")
console.log("!")
console.log("!")

-> 비동기 작업이 앞에 있어도 처리시간이 빠른 함수부터 작업을 완료시킨다.