2020.02.11 Javascript ES6 비동기 처리방식과 Promise

*es6을 사용하고 있기때문에 바벨을 사용할예정*

 

비동기 처리방식에서 사용한 콜백함수는 이전에 말했듯이 계속 사용할경우 코드의 복잡성과 기능적으로 꽤 비정상적으로 변하게 된다. 따라서 이러한 문제를 보완하기 위해 나타난게 Promise와 async&await이다. 우선은 여기서 Promise를 말하려고 한다.

 

Promise 어떻게 사용할까?

 

우선은 콜백함수부터 보자.

현재 콜백함수로 쓰인 이 코드에 Promise를 적용하게 되면 이렇게 바뀐다.

 

이 코드에 대해서 설명을 하자면

우선 Pending,Fulfilled,Rejected를 알아야한다.

 

1. Pending

new Promise((resolve,reject)=>{~~~});

여기서 new Promise() 이부분이 들어간 코드를 실행시키면 Pending상태가 된다.

Pending 상태란 Promise의 resolve와 reject를 사용할수있는 상태를 말한다.

 

2. Fulfilled

위에서 resolve(response); 이 코드를 실행시킨 부분을 보면 resolve가 실행되는것을 볼수있다.

이 상태를 Fulfilled 상태라고 부른다. resolve를 이용해서 실행시킬수 있는 상태를 말한다.

resolve를 실행시키게되면 이제 getData 함수뒤에 .then을 사용할수있게 된다.

resolve(response)의 결과값을 .then으로 받는것이다.

 

3. Rejected

거부 상태를 말한다. 즉, 실패했을경우를 말하는것이다. 

 

이렇게 .then() 뒤에 .catch()를 적어서 사용한다.

 

3개 전부를 사용한 쉬운 예제를 하나 보자.

1번,2번,3번 전부 사용된 예제이다. 

보면 resovle와 reject를 같이 사용할때 if문을 사용한것을 볼수있을것이다.

맞으면 resolve 틀리면 reject라는 값을 출력해야하기 때문에 그렇다.

그리고 완성된 getData를 then과 catch를 사용하여 출력할때 then()이 끝나고나서 바로 .catch를 사용하는게 다른 부분이라고 할수있겠다.

 

이제는 finally에 대해서 말하려고 한다.

Promise의 성공여부와는 상관없이 무조건 호출되는 함수이다.

코드를 보면 추가한 finally를 볼수있다.

finally는 왜 쓰냐면 성공을 하든 에러가 나든 무조건 실행되어야 하는 함수가 존재할경우

사용해주면 된다.

finally가 없는경우 then에도 적어줘야하고 catch에도 적어줘야 하므로 효율적이지 못한 코딩이라고 할수있다.

그러므로 상황에 맞게 finally를 써주면 좋을것같다.