인프런 커뮤니티 질문&답변
작성한 질문수
mounted에서 스피너 종료하는것이 작동하지 않을 때
작성
·
266
1
안녕하세요 캡틴판교님
강의 정말 잘 듣고 있습니다.
혼자 공부하는데 정말 큰 도움이 되고 있어요. 감사합니다.
스피너 종료 호출 시점에 관해서 질문이 있는데요,
강의에서 ask, jobs, news 를 번갈아가며 클릭할 때 마다 매번 created, mounted 가 되잖아요. 그래서 이런 경우에 mounted 에 end spinner 를 하면 스피너가 잘 멈추더라고요.
그런데 저는 ask 에서 유저정보를 클릭하면 url이 바뀌면서 유저 정보 페이지로 가는게 아니고,
ask 목록 페이지에서 우측에 작게 유저정보 컴포넌트를 보이게 하고 싶은데요, 이 때 유저 아이디를 클릭했을 때 스피너가 돌아가고, mounted에 스피너를 끝내는 동작을 하면 첫 번째 유저 정보 페이지를 클릭했을 때만 작동하고 그 후부터는 mounted가 이미 됐기 때문에 작동하지 않는 것 같아요.
그래서 mutations에 유저정보 state를 변경해주는게 끝나면 그 안에서 bus.$emit('end:spinner')를 해주었는데요, 작동은 잘 하지만, mounted에서 한 것처럼 깔끔하게 스피너가 딱 중지하지않아서 다른 방법을 여쭤보고 싶습니다.
답변 2
0
댓글 읽다가 궁금한건데
axios 가 http통신 라이브러리라서 http를 통신할떄 사용하는건 이해가 가는데
혹시 vue프로젝트에서 컴포넌트에서 axios를 안쓰고 async awaite를 사용했는데
async awaite는 뷰에서 권장하는 방식이라고 알고있습니다.
http를 통신할떄 async awaite를 써도 상관이 없을까요??
아니면 꼭 http통신할때는 axios를 써야하고
인스턴스안에서 통신할떄는 async awaite를 써야하는 걸까요?
두개의 차이점이 궁금합니다
async awaite 와 axios
0
안녕하세요 dayone님 제가 답변이 조금 늦었네요 :) 강의가 큰 도움 되었다고 말씀해 주셔서 감사합니다 :) 상세 정보 페이지로 가지 않고 옆에 상세 정보 패널을 띄우고 싶다는 말씀이시죠? :) 스피너의 시작과 끝은 데이터의 요청이 시작되었을 때와 끝났을 때로 정해주시면 됩니다. 데이터가 요청되고 응답이 오기까지는 아래 2가지 코드를 보시면 알 수 있으실거 같아요 :)
// 프로미스를 사용하는 경우
let loading = true;
axios.get().then(res => {
loading = false;
})
// async await를 사용하는 경우
async function fetchData() {
let loading = true;
await axios.get();
loading = false;
}
코드가 길어질까봐 실패 케이스는 추가하지 않았는데요. 실패 케이스를 항상 먼저 처리 하시는 습관을 들이시면 로딩 상태 관리 하실 때 도움되실거에요 :)