• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

mounted에서 스피너 종료하는것이 작동하지 않을 때

21.01.01 22:43 작성 조회수 198

1

안녕하세요 캡틴판교님

강의 정말 잘 듣고 있습니다.

혼자 공부하는데 정말 큰 도움이 되고 있어요. 감사합니다.

스피너 종료 호출 시점에 관해서 질문이 있는데요,

강의에서 ask, jobs, news 를 번갈아가며 클릭할 때 마다 매번 created, mounted 가 되잖아요. 그래서 이런 경우에 mounted 에 end spinner 를 하면 스피너가 잘 멈추더라고요.

그런데 저는 ask 에서 유저정보를 클릭하면 url이 바뀌면서 유저 정보 페이지로 가는게 아니고,

ask 목록 페이지에서 우측에 작게 유저정보 컴포넌트를 보이게 하고 싶은데요, 이 때  유저 아이디를 클릭했을 때 스피너가 돌아가고, mounted에 스피너를 끝내는 동작을 하면 첫 번째 유저 정보 페이지를 클릭했을 때만 작동하고 그 후부터는 mounted가 이미 됐기 때문에 작동하지 않는 것 같아요. 

그래서 mutations에 유저정보 state를 변경해주는게 끝나면 그 안에서 bus.$emit('end:spinner')를 해주었는데요, 작동은 잘 하지만, mounted에서 한 것처럼 깔끔하게 스피너가 딱 중지하지않아서 다른 방법을 여쭤보고 싶습니다.

답변 2

·

답변을 작성해보세요.

0

삼천리님의 프로필

삼천리

2021.05.07

댓글 읽다가 궁금한건데 
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;

}

코드가 길어질까봐 실패 케이스는 추가하지 않았는데요. 실패 케이스를 항상 먼저 처리 하시는 습관을 들이시면 로딩 상태 관리 하실 때 도움되실거에요 :)