Vue - call async action only after first one has finished

Question

I need to call 2 actions from inside my component, but the second should only start after the first one has 100% finished it's job.

I'm trying this but it doesn't work

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

and the 2 actions are these

    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) })
    }

These should be the other way around. Screen of my network tab

score 3 · Accepted Answer · answered Oct 19 '17 at 02:18

3

When you dispatch an action, it doesn't have a then callback by default. That's only the case if the action returns a Promise. Your axios.get call should return a Promise, but you aren't returning it in your action. You should simply return it and then then callback will fire in your mounted hook.

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) })
},

answered Oct 19 '17 at 02:18

thanksd

54,176
22
157
150

Your code looks the same as mine. How do I return a promise with a axios? I thought “.then()” was the promise...? – Oct 19 '17 at 03:41
My bad. I just saw you added “return” before anything. So that’s it? I’m very confused.. – Oct 19 '17 at 03:43
Right. So say you stored the returned value of your `dispatch` call in your `mounted` hook like `let promise = this.$store.dispatch('coinModule/loadApiCoins')`. In your code, the `loadApiCoins` action doesn't return anything, so `promise` will be `undefined` and `promise.then(() => { })` will result in an error. That's why `this.$store.dispatch('coinModule/loadApiCoins').then(() => { })` won't work. The resulting value of the dispatch call is `undefined`. You need to explicitly return the resulting `Promise` from the `Vue.axios` call. – thanksd Oct 19 '17 at 13:04
I'm still confused. If I try to log the response from the component it's undefined still, so I'm not really returning it I guess, but the code now works as expected.. this.$store.dispatch('coins/loadApiCoins') .then(response => { console.log(response) }) – Oct 19 '17 at 13:22
I'm not sure what you mean by "log the response from the component". If you are returning the `axios` call in the `dispatch` method like I showed, then `console.log(this.$store.dispatch('coinModule/loadApiCoins'))` should log a `Promise` object in the console. I think you might be logging the `dispatch` call with the `then` callback as well. Since the `then` method doesn't return anything, `console.log(this.$store.dispatch('...').then(() => {}))` will log `undefined` in the console. That's expected. – thanksd Oct 19 '17 at 13:36
From my understanding, the axios calls return a response which you can use in the "then" method to call mutations or whatever. Now, if I need to use that response from inside the component to pass it maybe to another action or something, how do I do that? Does what I'm asking makes sense? Should I open a new question and provide some examples? – Oct 19 '17 at 13:46
The `axios` call returns a `Promise`. I would read up on those: https://developers.google.com/web/fundamentals/primers/promises. Then, if you still are confused, I would open a new question describing the exact problem you're having with a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve) of the issue. – thanksd Oct 19 '17 at 13:55

Vue - call async action only after first one has finished

1 Answers1

Linked