В настоящее время console.info(this.detaliiMP) возвращает пустой массив. Я хочу дождаться, пока функция getData() извлечет данные в массив detaliiMP, а затем вывести на консоль массив, заполненный данными.
const app = Vue.createApp({
data() {
return {
detaliiMP: []
}
},
methods: {
getData() {
fetch("https://random-data-api.com/api/v2/users?size=5")
.then(res => res.json())
.then(data => this.detaliiMP = data)
.catch(err => console.error(err.message))
},
showData() {
this.getData()
console.info(this.detaliiMP)
}
},
})
app.mount('#app')
<script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id = "app">
<button @click = "getData">Get Data</button>
<button @click = "showData">Console LogOut</button>
<p v-for = "item in detaliiMP">{{ item.first_name }}</p>
</div>
Я пытался использовать async/await, но явно сделал что-то не так, потому что это не работает.
Это вопрос асинхронности/ожидания.
const app = Vue.createApp({
data() {
return {
detaliiMP: []
}
},
methods: {
async getData() {
await fetch("https://random-data-api.com/api/v2/users?size=5")
.then(res => res.json())
.then(data => this.detaliiMP = data)
.catch(err => console.error(err.message))
},
async showData() {
await this.getData()
console.info(this.detaliiMP)
}
},
})
app.mount('#app')
<script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id = "app">
<button @click = "getData">Get Data</button>
<button @click = "showData">Console LogOut</button>
<p v-for = "item in detaliiMP">{{ item.first_name }}</p>
</div>
Я использовал async/await только для одной функции за раз, а не для обеих одновременно (черт возьми). Я пытаюсь понять логику, и я действительно не понимаю, почему нам нужно использовать async/await для обеих функций одновременно? Спасибо!
Отвечает ли это на ваш вопрос? Почему моя переменная остается неизменной после того, как я изменяю ее внутри функции? - Справочник по асинхронному коду