我创建天气应用程序，并提出了一些组件，其中有字段的数据部分，然后在方法部分，我改变了字段的值，并试图得到它在其他方法，但我得到旧的值（值没有改变）
<template>
<div id = "container">
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data () {
return {
city: '',
region: '',
country: '',
// Geographical coordinates (latitude, longitude)
lat: 0,
lon: 0
}
},
methods: {
async getGeolocationInformation () {
const API_KEY = 'REPLACE_WITH_VALID_API_KEY'
const API_URL = 'https://ipgeolocation.abstractapi.com/v1/?api_key=' + API_KEY
const apiResponse = await fetch(API_URL)
const data = await apiResponse.json()
const { city, country, region } = data
this.$data.city = city
this.region = region
this.country = country
this.lon = 100
},
getCoordinatesCityByName () {
alert(this.lon)
},
setCity (city){
this.city = city
},
},
created () {
this.getGeolocationInformation()
this.getCoordinatesCityByName()
},
}
</script>我试着读了一些文章，但同样的代码在那里工作，但不适合我
2条答案
按热度按时间rkttyhzu1#
在您的代码中，在调用created（）生命周期钩子中的getGeolocationInformation（）方法之后，立即调用getCoordinatesCityByName（）方法。但是，getGeolocationInformation（）方法是异步的，这意味着从API获取数据并更新值需要一些时间。
当您调用getCoordinatesCityByName（）时，它会在getGeolocationInformation（）的异步操作完成之前执行，因此您正在尝试在使用新值更新lon属性之前访问它。
要确保访问更新后的值，需要等待异步操作完成，然后再调用getCoordinatesCityByName（）。实现这一点的一种方法是在created（）钩子中使用async/await语法。
请记住不要在代码中存储API密钥;- ）
下面是代码的更新版本：
fnvucqvd2#
getGeolocationInformation函数是asynchronous，getCoordinatesCityByName函数会在API返回响应并设置值之前执行，所以需要await函数才能在getGeolocationInformation之后执行getCoordinatesCityByName函数。