CODEWITHSUNDEEP
vuejs2nuxt.jsvuex
HYDRA LAZER
HYDRA LAZER

Reputation: 31

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

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

Upvotes: 0

Views: 2212

Answers (1)

webdevetc
webdevetc

Reputation: 46

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)

Upvotes: 2

Related Questions