使用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 action中，并且它起作用了。但是，我不明白它们之间的区别。

下面的代码已经对我起作用：

组件：

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

- user3118789

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 返回一个 Promise。为了让 await 等待它，您需要返回该 Promise。否则，您隐式地返回 undefined，await undefined 将立即解决。

- jian

---

你隐式地返回了undefined，而且await undefined会立即解析。这对我的情况有所帮助。谢谢！ - Thakur Karthik

完全忘记返回axios的promise了，真是救命稻草！ - Amr SubZero

哇，我很高兴找到了这个解决方案，非常感谢你！ - Nagisa Ando

Answer 2

您不能在没有Promise的情况下等待一个函数。

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

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

- Ashok