Async / Await с отправкой Vuex - PullRequest
Новая
       11

Async / Await с отправкой Vuex

1 голос
/ 16 апреля 2019

Я делаю загрузчик для некоторых компонентов в моем приложении.

Вот мой компонент: 

        mounted() {
            this.loading = true;

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

                console.log(123);

                this.loading = false;
            }
        },

Vuex action: 

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 action: 

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

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

Ответы [ 2 ]

2 голосов
/ 16 апреля 2019

Изменить это: 

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 немедленно разрешит.

1 голос
/ 16 апреля 2019

Вы не можете ждать функцию без обещания 

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 также возвращает обещание.

...