인프런 커뮤니티 질문&답변
작성한 질문수
전역 axios설정 문의
해결된 질문
작성
·
369
1
안녕하세요 강사님
좋은 강의 언제나 감사드립니다.
강사님의 강의 덕분에 기존 jsp를 뷰로 전환을 성공적으로 적용할 수 있었습니다.
다만 한 가지 여쭤보고 싶은 점이 있는데, axios를 사용하게 될 시에, 만일 뷰의 컴포넌트 하나가 로딩될 때 자식 컴포넌트 3개를 import해서 해당 자식 컴포넌트의 created시점에 api를 호출하도록 설정을 했는데, 이 경우에 서버에서 토큰 만료가 되었음을 리턴받게 되었을 때 나머지 api들을 요청 취소 할 수 있는 방법은 없을까요? 아니면 제가 아키텍쳐 설계를 잘못한 걸까요? 자식 컴포넌트는 단순 prop으로 데이터 전달 받아서 동작할 뿐, 컴포넌트에서 api를 호출 하지 않는 방식으로 가야 할까요?
혹시 강사님은 실제 프로젝트를 하실때 해당 이슈에 대해 어떻게 처리하시는 지 궁금합니다.
단순히 제가 생각했을때는 위에 이야기 한 것 처럼 컴포넌트에서는 api를 날리지 않고 부모 컴포넌트에서 코드를 async await로 api여러개 조회 후 try catch문으로 에러가 발생하면 그 이후 코드는 실행하지 않도록 한 뒤 자식 컴포넌트에게 데이터를 prop으로 넘겨주는 방식밖에 생각이 나지 않는데 제 생각이 잘못되었거니 더 좋은 방법이 있는 것인지 궁금합니다.
답변 1
1
안녕하세요 밤의 멜로디님, 좋은 강의라고 말씀해 주셔서 감사합니다 :) 열심히 들어주셔서 그런지 실제로 적용하면서 겪게되는 좋은 질문을 주셨네요 :) 아마 찾으시는 API는 아래 API 인 것 같아요. 아래 API 사용하시면 기존에 보낸 요청을 취소하실 수 있을겁니다 :)
네 강사님 답변 감사드립니다.
위의 API도 적용을 해 봤었는데 궁극적으로 제가 원하는 API가 아닌 거 같아서 여쭤보고 싶었습니다 ㅠㅠ
제 글에 요청 취소라고 적어놓았는데 궁극적으로 제가 원하는 건 첫번째 axios의 응답이 토큰 유효성 오류로 넘어오게 된다면 그 이후 (axios요청)코드들이 취소 되는, 다시 말하자면 이후의 api들이 요청되지 않았으면 하는 바람이 있습니다.
현재 제 프로젝트에서 코드 성 select box를 공통 컴포넌트로 빼서 각 페이지(부모)컴포넌트에서 필요할때마다 불러서 삽입해서 작업을 하고 있습니다. ex) email주소, 이동 통신사 등등..
이렇게 진행이 될 시에, 생명주기 상 자식 컴포넌트가 먼저 로딩 되기 때문에 이미 select box에서 토큰 유효성 오류 리턴을 받게 되는데, 부모의 created시점에서는 자식과 별개로 또 다시 필요한 api를 요청하기 때문에, 토큰 유효성 오류가 여러번 반복해서 리턴 되고 있는 상황입니다.
그래서 제가 여쭤본 내용 중에는 혹시나 이런 상황이 해결이 어렵다면 자식 컴포넌트에서 axios를 호출하는 것을 지양하고 부모 컴포넌트에서 조회 이후 props로 값을 내려주는 방식을 써야 하는건지 궁금합니다.
토큰 유효성이 만료되면 경고창을 띄운 이후 로그인 창으로 돌려 보내는 작업을 하는데,
경고창이 여러번 떠서 해결방안을 물색중에 있었습니다.
긴 글 읽어 주셔서 감사합니다.