전역 axios설정 문의
안녕하세요 강사님
좋은 강의 언제나 감사드립니다.
강사님의 강의 덕분에 기존 jsp를 뷰로 전환을 성공적으로 적용할 수 있었습니다.
다만 한 가지 여쭤보고 싶은 점이 있는데, axios를 사용하게 될 시에, 만일 뷰의 컴포넌트 하나가 로딩될 때 자식 컴포넌트 3개를 import해서 해당 자식 컴포넌트의 created시점에 api를 호출하도록 설정을 했는데, 이 경우에 서버에서 토큰 만료가 되었음을 리턴받게 되었을 때 나머지 api들을 요청 취소 할 수 있는 방법은 없을까요? 아니면 제가 아키텍쳐 설계를 잘못한 걸까요? 자식 컴포넌트는 단순 prop으로 데이터 전달 받아서 동작할 뿐, 컴포넌트에서 api를 호출 하지 않는 방식으로 가야 할까요?
혹시 강사님은 실제 프로젝트를 하실때 해당 이슈에 대해 어떻게 처리하시는 지 궁금합니다.
단순히 제가 생각했을때는 위에 이야기 한 것 처럼 컴포넌트에서는 api를 날리지 않고 부모 컴포넌트에서 코드를 async await로 api여러개 조회 후 try catch문으로 에러가 발생하면 그 이후 코드는 실행하지 않도록 한 뒤 자식 컴포넌트에게 데이터를 prop으로 넘겨주는 방식밖에 생각이 나지 않는데 제 생각이 잘못되었거니 더 좋은 방법이 있는 것인지 궁금합니다.
답변 1
1
안녕하세요 밤의 멜로디님, 좋은 강의라고 말씀해 주셔서 감사합니다 :) 열심히 들어주셔서 그런지 실제로 적용하면서 겪게되는 좋은 질문을 주셨네요 :) 아마 찾으시는 API는 아래 API 인 것 같아요. 아래 API 사용하시면 기존에 보낸 요청을 취소하실 수 있을겁니다 :)
https://axios-http.com/docs/cancellation
0
네 강사님 답변 감사드립니다.
위의 API도 적용을 해 봤었는데 궁극적으로 제가 원하는 API가 아닌 거 같아서 여쭤보고 싶었습니다 ㅠㅠ
제 글에 요청 취소라고 적어놓았는데 궁극적으로 제가 원하는 건 첫번째 axios의 응답이 토큰 유효성 오류로 넘어오게 된다면 그 이후 (axios요청)코드들이 취소 되는, 다시 말하자면 이후의 api들이 요청되지 않았으면 하는 바람이 있습니다.
현재 제 프로젝트에서 코드 성 select box를 공통 컴포넌트로 빼서 각 페이지(부모)컴포넌트에서 필요할때마다 불러서 삽입해서 작업을 하고 있습니다. ex) email주소, 이동 통신사 등등..
이렇게 진행이 될 시에, 생명주기 상 자식 컴포넌트가 먼저 로딩 되기 때문에 이미 select box에서 토큰 유효성 오류 리턴을 받게 되는데, 부모의 created시점에서는 자식과 별개로 또 다시 필요한 api를 요청하기 때문에, 토큰 유효성 오류가 여러번 반복해서 리턴 되고 있는 상황입니다.
그래서 제가 여쭤본 내용 중에는 혹시나 이런 상황이 해결이 어렵다면 자식 컴포넌트에서 axios를 호출하는 것을 지양하고 부모 컴포넌트에서 조회 이후 props로 값을 내려주는 방식을 써야 하는건지 궁금합니다.
토큰 유효성이 만료되면 경고창을 띄운 이후 로그인 창으로 돌려 보내는 작업을 하는데,
경고창이 여러번 떠서 해결방안을 물색중에 있었습니다.
긴 글 읽어 주셔서 감사합니다.
node 10버전 사용
0
85
1
강의에 대해 질문 드립니다.
0
75
1
vue CLI 대신 vite를 사용해도
1
164
2
질문삭제
0
171
2
강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요
0
102
1
로그인 에러발생만하면 네트워크 커넥션 에러 발생 해결
0
127
1
rndrmagkqslek.
0
79
1
계속 따라하다가 안돼서 bash에 연결할떄 안되더라구요
0
109
1
axios 에러가 뜹니다.
1
249
2
vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들
2
322
1
vue 관련 다른 강의 출시예정이없으신지 궁금합니다!
1
158
1
AppHeader.vue에 vue 디폴트 만들에 Delete `␍` 오류나면
1
200
1
vue3로 따라오시다가 import axios 에러 뜨시는 분들
2
463
2
$router 를 이용한 메인 페이지로 이동
1
294
1
혹시 node.js 10.24 버전으로 해도 상관없나요?
2
475
2
에러 경로가 LoginForm.vue 43번째줄 말고 다른 경로로 출력됩니다.
1
303
2
pinia 사용할려고 하는데 에러가 나옵니다.
1
496
2
swagger ui의 post/posts에 글 기록하려고 하면 unauthorized 에러가 납니다..
1
1119
2
safari 개발자 도구에 대한 질문입니다
1
579
2
스웨거에 글 등록시 401 에러가 나와요 ㅠ
1
733
2
이 에러 때문에 진행이 안되네요 ㅠ
1
678
1
windows .nvmrc nvm use 실행 오류
1
1559
2
강사님 최신화가 필요해보입니다.
2
965
2
npm i 에러
1
621
1