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

webdevetc · Accepted Answer · 2021-02-06 10:57:15Z

2

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)

answered Feb 6, 2021 at 10:57

webdevetc

463 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related