[javascript] Promise

October 12, 2022

Promise에 대한 정리 📕

Promise 객체

promise는 { state, result } 형태의 객체이다.

state는 Promise의 상태를 표시한다. 초기값은 pending(대기), resolve가 호출되면 fulfilled(이행), reject가 호출되면 rejected(거부) 값을 갖고, 둘 중 한가지로 완료된 이후에는 setteled 상태를 갖는다.

result는 resolve가 호출되었을 때에는 함수에 전달된 값. 아래 예시 resolve('OK')에서 ‘OK’를 값으로 갖고, reject가 호출되었을 때에는 해당 함수에 전달된 Error를 값으로 갖는다.

Promise를 사용하면 비동기적 함수를 동기적인 것처럼 보이게 할 수 있다.

사용하기

Promise 생성

new Promise( (F_RESOLVE, F_REJECT) => { FUNCTION } )

Promise 객체를 생성한다. F_RESOLVE와 F_REJECT는 각각 성공, 실패를 의미하는 함수이다.
```
const pr = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('OK')
    }, 3000)
})
```
then(F_SUCCESS, F_FAILED)

프로미스가 reselve를 실행시켰을 때와 reject를 실행시켰을때의 함수를 매개변수로 받아, 프로미스의 state에 따라 해당하는 함수를 실행한다.
```
pr.then(
    function(result) {
        console.log('성공')
    },
    function(err){
        console.log('실패')
    }
)
```
catch

프로미스가 reject를 실행시켰을 때 매개변수의 함수를 실행한다.
```
pr.catch(function(err){
    console.log('실패')
})
```

then과 catch문을 함께 사용하는 것이 가독성에 좋다.

pr.then(
    function(result) { console.log('성공') }
).catch(
    function(err){ console.log('실패')}
)

finally

성공, 실패와 관계없이 가장 마지막에 실행된다.

pr.then(
    function(result) { console.log('성공') }
).catch(
    function(err){ console.log('실패')}
).finally(
    function(){ console.log('종료')}
)

콜백지옥

deps가 깊어지며 여러개의 콜백함수가 실행되는 것

const f1 = (callback) => { setTimeout(function() { console.log('1번'); callback(); }, 1000)} )
const f2 = (callback) => { setTimeout(function() { console.log('2번'); callback(); }, 2000)} )
const f3 = (callback) => { setTimeout(function() { console.log('3번'); callback(); }, 3000)} )
  
f1(function(){
    f2(function(){
        f3(function(){
            console.log('끝')
        })
    })
}

프로미스 체이닝

프로미스로 여러개의 함수를 연결하는 것.

const f1 = (msg) => { console.log(msg);
                     return new Promise((res, rej) => { setTimeout(function() { res('1번');}, 1000)} );
const f2 = (msg) => { console.log(msg);
                     return new Promise((res, rej) => { setTimeout(function() { res('2번');}, 2000)} );
const f3 = (msg) => { console.log(msg);
                     return new Promise((res, rej) => { setTimeout(function() { res('3번');}, 3000)} );
  
f1
.then( res => f2(res))
.then( res => f3(res))
.then( res => console.log(res))                  

Promise.all

다수의 함수를 배열로 받아 모두 이행되었을 때 then을 실행시킨다.
```
Promise.all([FUNTION1, FUNCTION2, FUNCTION3, ...]).then() 
```
Promise.race

다수의 함수를 배열로 받아 가장 빠른 1개가 이행되었을 때 then을 실행시킨다.
```
Promise.race([FUNTION1, FUNCTION2, FUNCTION3, ...]).then() 
```

출처

https://youtu.be/3Ao3OroqQLQ

Rose

Promise 객체

사용하기

출처