Vue - 첫 번째 작업이 완료된 후에 만 ​​비동기 작업을 호출하십시오.

Question

두 번째 작업은 내 구성 요소에서 호출해야하지만 두 번째 작업은 첫 번째 작업이 100 % 완료된 후에 시작해야합니다.

나는이 노력하고있어하지만

mounted() { 
    this.$store.dispatch('coinModule/loadApiCoins') 
     .then(() => { 
      this.$store.dispatch('coinModule/loadUserCoins') 
     }) 
     .catch(error => { 
      console.log(error) 
     }); 
}, 

작동하지 않고이 작업은이

loadApiCoins({ commit, dispatch, rootGetters }) { 
     Vue.axios({ 
       method: 'get', 
       url: 'https://api.coinmarketcap.com/v1/ticker/', 
       transformRequest: [(data, headers) => { 
        delete headers.common.Authorization 
        return data 
       }] 
      }) 
      .then(response => { commit('SET_API_COINS', response.data) }) 
      .catch(error => { console.log(error) }) 
    }, 

    loadUserCoins({ commit, dispatch, rootGetters }) { 
     Vue.axios.get('http://127.0.0.1:8000/api/coins/') 
      .then(response => { 
       commit('SET_USER_COINS', response.data) 
       commit('SET_USER_PORTFOLIO_OVERVIEW') 
      }) 
      .catch(error => { console.log(error) }) 
    } 

다음은 다른 방법으로 주위해야합니다. Screen of my network tab

Answer 1

작업을 보내면 기본적으로 then 콜백이 없습니다. 액션이 Promise을 반환하는 경우에만 해당됩니다. axios.get 전화는 Promise을 반환해야하지만 조치로 반환하지는 않습니다. 당신은 단지 그것을 돌려 보내야하고 mounted 후크에서 then 콜백이 발사 될 것입니다.

loadApiCoins({ commit, dispatch, rootGetters }) { 
    return Vue.axios({ 
    method: 'get', 
    url: 'https://api.coinmarketcap.com/v1/ticker/', 
    transformRequest: [(data, headers) => { 
     delete headers.common.Authorization 
     return data 
    }] 
    }) 
    .then(response => { commit('SET_API_COINS', response.data) }) 
    .catch(error => { console.log(error) }) 
},