使用Vuex调度进行异步/等待

Question

我正在为我的应用程序中的某些组件加载程序。

这是我的组件：

        mounted() {
            this.loading = true;

            this.getProduct();
        },
        methods: {
            async getProduct() {
                await this.$store.dispatch('product/getProducts', 'bestseller');

                console.log(123);

                this.loading = false;
            }
        },

Vuex动作：

getProducts({commit}, type) {
        axios.get(`/api/products/${type}`)
            .then(res => {
                let products = res.data;
                commit('SET_PRODUCTS', {products, type})
            }).catch(err => {
            console.log(err);
        })
    },

问题在这一行： await this.$store.dispatch('product/getProducts', 'bestseller');

我希望代码会在该行停止，并等待从AJAX调用加载数据，然后将加载设置为false;

但事实并非如此。在我的数据准备就绪之前，仍将设置加载false并console.log运行。

我已经尝试过将async / await移到Vuex动作中，并且它起作用了。但是，我没有得到它们之间的区别。

下面的代码为我工作：

零件：

mounted() {
            this.loading = true;

            this.$store.dispatch('product/getProducts', 'bestseller').then((res) => {
                this.loading = false;
            });
        },

Vuex动作：

async getProducts({commit}, type) {
        let res = await axios.get(`/api/products/${type}`);

        commit('SET_PRODUCTS', {products: res.data, type});
    }

Answer 1

你不能等待一个没有承诺的函数

await this.$store.dispatch('product/getProducts', 'bestseller');

该函数返回数据或调用新动作

getProducts({commit}, type) {
    axios.get(`/api/products/${type}`)
        .then(res => {
            let products = res.data;
            commit('SET_PRODUCTS', {products, type})
        }).catch(err => {
        console.log(err);
    })
},

由于异步函数，该函数返回承诺

async function return promise

async getProducts({commit}, type) {
    let res = await axios.get(`/api/products/${type}`);

    commit('SET_PRODUCTS', {products: res.data, type});

}

现在使用上面的功能现在你可以使用

await this.$store.dispatch('product/getProducts', 'bestseller');

用await关键字或者你可以返回axios，因为axios也返回一个promise。

Answer 2

更改此：

getProducts({commit}, type) {
    axios.get(`/api/products/${type}`)
        .then(res => {
            let products = res.data;
            commit('SET_PRODUCTS', {products, type})
        }).catch(err => {
        console.log(err);
    })
},

对此：

getProducts({commit}, type) {
    return axios.get(`/api/products/${type}`)
        .then(res => {
            let products = res.data;
            commit('SET_PRODUCTS', {products, type})
        }).catch(err => {
        console.log(err);
    })
},

应该管用。

axios.get返回承诺。您需要退还该诺言以便await等待。否则，您将隐式返回undefined并await undefined立即解决。