Async/Await с отправкой Vuex
Я делаю загрузчик для некоторых компонентов в своем приложении.
Вот мой компонент:
mounted() {
this.loading = true;
this.getProduct();
},
methods: {
async getProduct() {
await this.$store.dispatch('product/getProducts', 'bestseller');
console.info(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.info(err);
})
},
Проблема в этой строке: await this.$store.dispatch('product/getProducts', 'bestseller');
Я ожидаю, что код остановится на этой строке и дождется загрузки данных из вызова AJAX, а затем установит загрузку false;
Но это не так. Загрузка все еще установлена false и console.info запускается до того, как мои данные будут готовы.
Я уже пытался переместить 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Измените это:
getProducts({commit}, type) {
axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.info(err);
})
},
К этому:
getProducts({commit}, type) {
return axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.info(err);
})
},
Должно сработать.
axios.get возвращает обещание. Вам нужно будет вернуть это обещание, чтобы позволить await дождаться его. В противном случае вы неявно возвращаете undefined, а await undefined немедленно разрешится.
совершенно забыл вернуть обещание axios, спасатель жизни!
оооо, я рад найти это решение, большое спасибо!
Вы не можете ждать функцию без обещания
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.info(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');
с ключевым словом ожидания Или вы можете вернуть аксиомы, потому что аксиомы также возвращают промис.
«вы неявно возвращаете undefined, и await undefined немедленно разрешится». Это помогло в моем случае. Спасибо!