Promise...

사실 async / await이 나와서 promise는 등한시 하는 느낌...사실 나 조차도 비동기 작업을 할 때 급하게 async, await만 공부했던 것 같다. ㅋㅋㅋ

하지만 promise는 비동기 작업을 위해서 필수적으로 이해해야 하는 개념이다. async / await의 원리와 같기 때문!

이걸 알아야 async / await의 구조를 정확히 알 수 있다.

Promise란?

promise는 비동기 작업을 제어하기 위해 나온 개념으로, callback hell에서 어느정도 벗어날 수 있게 해준다.
promise로 정의된 작업끼리는 연결할 수 있으며, 이를 통해 코드의 depth가 크게 증가지 않는 효과가 있다.

resolve, reject

promise 내부에서 비동기 상황이 종료될 때, resolve 함수를 호출한다.
반대로 오류 상황일 때, reject 함수를 호출한다.

const promise = new Promise((resolve, reject) => {
    // promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출
    // promise 내부에서 오류 상황일 때, reject 함수 호출
})

function asyncPromiseWork(){
    // code...
    return new Promise((resolve, reject) => {
        // code....
        return resolve('complete')
    })// promise를 리턴하는 함수 => 실행하고 .then으로 정상적으로 
  //종료될 때 이후 작업을 지정한다. 
}

asyncPromiseWork().then(result => console.log(result))

promise에서는 then을 이용해 비동기 작업 이후 실행할 작업을 지정한다.

promiseWork()
.then(result=> {return promiseNextWork(result)
}).then(result => {return promiseFinalWork(result)
}).then(result => {return promiseFinalWork(result)
})

확실히 callback보다 가독성이 높다.😊
Promise chain 중 작업이 실패했을 경우, catch로 잡을 수 있다.

promiseWork()
.then(result=> { 
    return promiseNextWork(result)
}).then(result => {
    return promiseFinalWork(result)
}).then(result => {
    return promiseFinalWork(result)
}).catch(e=>{
    alert('에러 발생')!
})

catch를 중간에 넣고 이후 작업을 연결해도 동작한다.
catch를 안 넣을 경우 promise chain 중 에러가 발생했을 때 chain이 멈추니 가급적이면 넣는 것이 좋다.
또 에러가 원인을 파악하기 힘들게 나오는 경우가 많다.

finally

성공과 실패 여부에 상관 없이 호출해야 하는 코드가 있다면 finally에서 처리한다.

promiseWork()
.then(result=> { 
    return promiseNextWork(result)
}).then(result => {
    return promiseFinalWork(result)
}).then(result => {
    return promiseFinalWork(result)
}).catch(e=>{
    alert('에러 발생')
}).finally(() => {
    alert('작업 끝')
})

기존의 callback 함수를 promise 형태로 만들 수 있다.

promise의 내장 함수들

Promise.all(iterable)

여러개의 promise를 동시에 처리할 때 유용하다.

const promise1 = delay(1000);
const promise2 = delay(1000);
const promise3 = delay(1000);

Promise.all([promise1, promise2, promise13]).then(() => {})

한번에 쫙 처리된다!(순차적으로 ㄴㄴ 동시다발적으로!)
위의 코드는 1초에 끝난다!

Promise.race(iterable)

여러 promise 중 하나라도 resorve or reject되면 종료된다.

Promise.any(iterable)

여러 promise중 하나라도 resolve 되면 종료된다.

Promise.allSettled(iterable)

여러 promise들이 성공했거나 실패했거나 상관 없이 모두 이행된 경우를 처리할 수 있다.
성공 / 실패 상관 없이 다 끝나면 처리한다.

pending(실행중) / settled(완료)

Promise.resolve

주어진 값이 Promise인 경우 해당 Promise가 반환된다. 즉, 프로미스 resolve 처리가 된 promise then 객체를 만든다.

이것의 용도는..?
함수의 return type 때문!

promise return 해야 하는 함수가 있는데, 이때 조건에 따라 그냥 값을 내보내야 하는 경우가 있다. 이때 return type이 맞지 않기 때문에 이런 사항에 데비해 무조건 return 값을 promise로 내보내는 용도이다.

ex) 캐시에 값이 있으면 promise를 쓰지 않아도 되지만 return type을 맞춰주기 때문에 promise 객체로 감싸서 준다.

Promise.reject

주어진 값으로 reject처리된 Promise.then 객체를 만든다.