강의

멘토링

로드맵

Inflearn Community Q&A

jjkim02223548's profile image
jjkim02223548

asked

The Complete Guide to Vue.js - Practical Concepts Learned Through Practice and Refactoring

Problems with data fetching using life cycle hooks and asynchronous code modification

FETCH_LIST 함수가 프로미스를 반환하고 있는 이유가 뭔가요?

Written on

·

297

1

저는 강사님과는 다르게 return문을 fetchList 앞에 안 붙였는데도 스피너가 동작하길래 한번 콘솔을 찍어봤는데

actions의

  FETCH_LIST({commit}, pageName){
    // api - index.js
    fetchList(pageName)
      // mutation "SET_LIST"
      .then(({ data }) => {
        console.log(4)
        commit("SET_LIST", data)
      })
      .catch(console.log)
  },

이 함수는 return문이 생략되어 있으니 undefined를 반환할 거라 예상했습니다

ListMixin.js

created(){
      bus.$emit('start:spinner') // 'start:spinner' 이벤트 보낸다 App.vue로
      setTimeout(()=>{
        console.log(this.$store.dispatch('FETCH_LIST', this.$route.name))
        
        this.$store.dispatch('FETCH_LIST', this.$route.name)
        .then((res)=>{
          console.log(5)
          console.log(res)
          console.log('fetched')
          bus.$emit('end:spinner') // 데이터 불러오고 나면 end:spinner
        }) // actions의 FETCH_NEWS의 return response를 받음
        .catch(console.log)
      },3000)
    },

근데 여기서 확인해보니 this.$store.dispatch('FETCH_LIST', this.$route.name)이 promise 객체던데 왜 그런건가요?

javascriptvue.jsvuejs

Answer 1

0

captain님의 프로필 이미지
captain
Instructor

안녕하세요, return 값이 없으면 말씀하신대로 undefined가 되어야 할 것 같은데 이상하네요.. 첨부해 주신 코드로 확인하신게 맞을까요?

jjkim02223548's profile image
jjkim02223548

asked

Ask a question