JS - redux-toolkit(툴킷)을 사용하는데 async,await try-catch 에러를 잡지못하는 당신에게 ....

문제상황

진행되는 프로젝트에 비동기 처리 작업을 하는도중
await 에서 분명히 promise 객체를 반환 할텐데
try catch 문 내부에서 api 콜 (비동기) 에러를 잡지 못하고있었다

const apiCall = async ()=>{
	try{
    
   	 await disptch (
    		👉 API_CALL.asyncAction.apiCall( {...}) //가공된 promise 객체 리턴
    
    
    	)
    	👉 await alert('API_CALL 성공')
    }catch(err){
       await alert('API_CALL 실패')
    	...
    
    }


}

👉 API_CALL.asyncAction.apiCall( {...}) 에서 에러를 발생시켰는데
await alert('API_CALL 성공') 이 계속 호출되었다.

처음엔 try catch 에서 api 요청에대한 비동기처리 에러를
감지 하지 못한다고 생각했다.

하지만 어찌됬든 promise 객체의 reject 를 반환 해서 이러한 생각은 말이 되지않았고

리덕스 툴킷을 사용하고 있다는 점을 간과하였다

👉 API_CALL.asyncAction.apiCall( {...}) 의 리턴값은 순수한 promise 객체가 아니였고

const apiCall = async ()=>{
	try{
 
	 await disptch (
 		👉 API_CALL.asyncAction.apiCall( {...}). unwrap() // promise 객체 리턴 
 
 
 	)
 	await alert('API_CALL 성공')
 }catch(err){
    👉 await alert('API_CALL 실패')
 	...
 
 }


}

리덕스 툴킷 unwrap() 을 붙여주니 정상적으로 에러를 감지하게되었다

리덕스 툴킷unwrap() 이란? : https://velog.io/@tkp12345/Redux-toolkit-unrap-%EC%9D%B4%EB%9E%80

참조

에러처리중복 : https://thinkforthink.tistory.com/194
async & awiat :https://developer.mozilla.org/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
에러핸들링:https://rinae.dev/posts/how-to-handle-errors-1
딥다이브 : https://velog.io/@boram_in/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C-46%EC%9E%A5-%EC%A0%9C%EB%84%88%EB%A0%88%EC%9D%B4%ED%84%B0%EC%99%80-asyncawait
제너레이터:https://ko.javascript.info/generators

참조:https://ko.javascript.info/async-iterators-generators
참조:https://blog.coderifleman.com/2014/11/15/javascript-and-async-error/