Async/Await 与 Vuex 调度答案

【问题标题】：Async/Await with Vuex dispatchAsync/Await 与 Vuex 调度
【发布时间】：2019-09-06 02:56:04
【问题描述】：

我正在为我的应用中的一些组件制作加载器。

这是我的组件：

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

【问题讨论】：

标签： javascript vue.js async-await vuex

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

【讨论】：

“你隐含地返回 undefined 并且 await undefined 会立即解决”这对我的情况有帮助。谢谢！
完全忘记回报 axios 的承诺，救命稻草！
woooo 我很高兴找到这个解决方案，非常感谢！

【解决方案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);
    })
},

由于异步函数，这个函数返回承诺

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。

【讨论】：