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

更改此：

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将立即解决。

Answer 2

您不能在没有承诺的情况下等待功能

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

此函数由于异步函数而返回promise

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');

带有等待关键字或者您可以返回axios，因为axios也返回了promise。

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

2 个答案: