2021. 10. 15. 19:46ㆍ작업/JavaScript
Promise :
- Callback chain을 쓰지 않고도 비동기 코드를 깔끔하게 쓸 수 있게 해줌.
- 비동기 실행이 완료된 후에 .then .catch .finally 등의 핸들러를 붙여 데이터처리로직, 에러처리로직, 클린업로직을 실행한다.
- promise 객체는 fulfilled, pending, rejected 세 가지 상태가 있다.
- fulfilled : 비동기 실행이 성공한 상태
- pending : 비동기 실행이 끝나기를 기다리는 상태
- rejected : 비동기 실행이 실패한 상태
Multiple Promise handling :
Promise.all() 모든 프로미스가 fulfilled되기를 기다린다. 하나라도 에러 발생하면 모든 프로미스 요청이 중단.
Promise.allSettled() 모든 프로미스가 settled 되길 기다린다.
Promise.race() 넘겨진 프로미스들 중 하나라도 settled 되기를 기다린다.
Promise.any() 넘겨진 프로미스 중 하나라도 fulfilled 되기를 기다린다.
Promise에서 중요하게 공부해야 할 두 가지
1. State : pending -> fulfilled or rejected
2. Producer(정보제공)와 Consumer(정보소비) 이해
새로운 Promise가 만들어질 때, 우리가 전달한 executor = (resolve,reject)가 인자 라는 Callback 함수가 자동적으로 실행된다.
Promise를 이용해 비동기 작업을 잘 실행완료 했다! -> resolve가 데이터값을 전달한다(Good Job!)
이제 Consumer입장에서 then, catch, finally를 해본다.
my_promise.then() 은 내가 my_promise가 비동기 작업을 성공적으로 수행했다! 그러면 다음 값을 전달해라~라는 함수.
이 때 저 인자로 넣어준 value에는 아까 resolve 시 넣은 데이터값이 들어감.
만약 resolve대신 .reject()를 하면 비동기 작업을 실패했을 때 ~를 해라라는 함수.
(이 때 사용하는 Error 역시 자바스크립트에서 제공하는 object!)
reject를 사용했기 때문에 우리가 만든 Error인 노 네트워크TT라는 문구가 떠야 하는데
현재 promise.then()으로 성공적인 경우만 써줬기 때문에 Uncaught라고 뜬다.
Chaning : promise.then()은 promise 자체를 return하게 되고, 그 return된 promise에 다시 한번 promise.catch()를 수행할 수 있다.
promise.finally()는 비동기 작업을 성공하든 실패하든 마지막에 해당 함수를 호출한다.
(reject을 써도 되고 resolve를 써도 된다!)
Promise Chaining : my_promise.then 하고 그 안에 또 다른 Promise를 해도 된다!
Error Handling :
만약 중간에 달걀 가져오는 부분에서 reject로 에러가 나도, 마지막에 catch를 해주면 작업들이 연결되어 catch에서 에러를 띄울 수 있다.
이렇게 중간에 reject가 되어 한 Promise작업에 실패해도.. catch를 then들 사이에 껴주어서 임기응변으로
Promise Chain을 완수 할 수 있다!
Callback Hell을 Cleaning 하자!
userWithRole도 필요 없고, 받은 값들로 계속 연결연결해서 user.name으로 해줘버려도 된다!
그리고 만약 error가 발생해도 catch로 에러를 띄워주면 된다.
