我试图从一个URL中获取数据,每当用户从<select>
下拉列表中选择一个新值时,这个URL就会发生变化。每次提取都会用新数据填充songkickData
数组。当我console.log songkickData
数组的每个<select>
更改时,记录的数据来自先前的选择。我想让它记录当前选择的数据。
我认为这与代码何时运行/ synchronicity / promises有关,但我还没有完全理解这一点。
下面是我的代码:
<template>
<select v-model="selected" @change="getCityData">
<option v-for="city in cities" :key="city.id" :value="city.id">{{ city.label }}</option>
</select>
</template>
import cityData from "../data/songkickCityData.js"
export default {
data() {
return {
cities: cityData,
songkickData: []
}
},
methods: {
getCityData(e) {
const songkickCityId = e.target.value
let songkickUrl = this.getSongkickUrl(songkickCityId)
fetch(songkickUrl)
.then(res => res.json())
.then(data => this.songkickData = data)
this.getRandomGig()
},
getSongkickUrl(songkickCityId) {
const now = new Date()
const today = now.toISOString().slice(0, 10)
const songkickAPIKey = 'XXXXXXXXXXXXX'
let songkickUrl = `https://api.songkick.com/api/3.0/metro_areas/${songkickCityId}/calendar.json?min_date=${today}&apikey=${songkickAPIKey}`;
return songkickUrl
},
getRandomGig() {
// Here is where I want to get the data from current select value, not the previous one.
console.log(this.songkickData)
}
}
}
字符串
2条答案
按热度按时间2vuwiymt1#
这里使用then()而不是async/await。async/await暂停执行,直到promise被解析。then()函数将继续执行代码,然后返回执行回调函数。
所以在你的fetch被解析之前,console.log()就已经在运行了。然后fetch解析,但是下一次运行getCityData()时,它使用旧值,因为新的fetch在console.log()之前再次没有解析。
参考本文
在本例中,您可以执行以下操作
字符串
或者切换到使用async/await
70gysomp2#
Fetch API是一个异步Web API,默认情况下,fetch()请求在浏览器设置的时间超时。因此,在fetch()之前调用的
this.getRandomGig()
方法被解析/拒绝。您可以在fetch返回的promise中调用
this.getRandomGig()
,以从当前API响应中获取结果。字符串