Promise에 대해

api와 소통하기 위해서는 비동기처리에 대해 알아야한다. 그래서 오늘 공부해본 Promise에 대해 글을 적어보려한다.

우선 Promise는 Class이기 때문에 new 키워드를 통해 만들 수 있다.
그리고 Promise의 생성자를 보면

executor 콜백함수를 받게 되어있다. 이 콜백함수에는 성공했을 때의 resolve와 실패했을 때의 reject가 있다.

아래의 예시를 살펴보자.

const promise = new Promise((resolve,reject) => {
    setTimeout(()=> {
        resolve('Hello')
    })
})

라고만 적는다면 아무 일도 발생하지 않을 것이다. 왜냐하면 성공했을 때의 요청을 처리하는 로직이라던가 에러가 생겼을 때 핸들링하는 로직이 없기 때문에
아무 일도 발생하지 않는다.

그리고 한 가지 주의할 점은 새로운 프로미스를 만들면 promise안의 executor는 자동적으로 실행이되니 목적에 맞게 설계를 해야할 것이다.

promise.then((value) => console.log(value))  // value는 resolve의 데이터
       .catch(error => console.log(error)) // error 발생시 핸들링부분
       .finally(()=> console.log('finally')) // 성공&실패 여부 상관없이 호출

이렇게 then을 통해 성공한 데이터를 불러올 수 있게되고 catch를 통해 에러가 발생한다면 catch문 안의 로직이 실행될 것이다.
마지막으로 성공과 실패 여부를 상관없이 호출되는 부분 finally가 있다.

• 마지막 예시

const fetchNumber = new  Promise((resolve,reject) => {
      setTimeout(()=> resolve(1),1000)
    })

    fetchNumber  
.then(num => num \* 2) // 1 x 2 = 2  
.then(num => num \* 3) // 2 x 3 = 6  
.then(num => {  
return new Promise((resolve,reject) => {  
setTimeout(()=> resolve(-1), 1000)  
})  
})  
.then(num => console.log(num))

위 처럼 값은 1로 설정하고 1초뒤에 실행되는 함수가 있다. 그리고 성공을 했을 경우 아래의 then에 순차적으로 쌓여 실행이 되게 되는데
성공을 했을 경우 1은 2를 곱하게되면 2가 되고, 그 2가 다시 3을 곱해 6이 된다. 6 을 가지고 새로운 프로미스를 만들어서 6의 -1 을
한 값인 5를 1초뒤에 반환하게 된다. 그래서 마지막 출력값에는 2초뒤에 5가 출력이 될 것이다.

이렇게 비동기적인것을 완성된것 부터 하나씩 처리하게 되는데 다음에는 많이 사용하는 비동기 async/await에 대해 알아봐야겠다.