vuejs2 - how to call multiple function in fetch hook in nuxt, vue

Question

I facing issue with calling multiple function in the fetch hook nuxt provided getting error when I am calling 2 function from fetch with await.

async fetch() {
        await this.fetchData();
        await this.fetchData2();
    },
    methods: {
        fetchData(lang) {
            this.$store.dispatch('getData')
        },
        async fetchData2() {
            let res = await api.getData2();
        },
    }

This is the flow I am using when the project run it giving error

TypeError: Cannot read property 'toLowerCase' of undefined and TypeError: progress.start is not a function

I am using nuxt progress for loading .Please let me know what I am doing wrong

question from:https://stackoverflow.com/questions/66046988/how-to-call-multiple-function-in-fetch-hook-in-nuxt-vue

Answer 1

You are awaiting this.fetchData(), but that is not returning a promise.

You want to add await this.$store.dispatch('getData'). You are also not making use of the lang param.

In other words, I guess the following would work...

async fetch() {
        await this.fetchData();
        await this.fetchData2();
    },
    methods: {
        async fetchData() {
            await this.$store.dispatch('getData')
        },
        async fetchData2() {
            let res = await api.getData2();
        },
    }

(or even just returning this.$store.dispatch('getData') without fetchData being an async fn)