I have integrated 2 components into my "App" that work together seamlessly. The first component is responsible for resolving the external IP address to a geographical location by making 2 axios.get calls and then passing them back to App.vue using emit.
Following this, I call upon "Weather" to retrieve the latitude/longitude data from the previous calls and fetch relevant weather information from the darksky API based on that location. However, I am encountering a race condition issue where sometimes, due to latency (about 50-60% of the time), I end up sending 0/0 coordinates to Weather, which are what I initialize as default values in App.vue. I am seeking ways to improve the reliability of the following code execution.
Here's the template structure in App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<ip @response="onResponse" /> // Requires completion before proceeding (includes axios calls)
<Weather msg="The weather for:" :lat="lat" :long="long" :ip="ip" :city="city" :country="country"/>
</div>
</template>
<script>
import Weather from './components/Weather.vue'
import ip from './components/ip_resolve.vue'
export default {
name: 'App',
data() {
return {
lat: 0,
long: 0,
ip: 0,
country: 0,
city: 0
}
},
components: {
Weather,
ip
},
//Listen for emitted values from ip_resolve - ensure data is updated before Weather runs
methods: {
onResponse(event) {
this.lat = event.lat
this.long = event.long
this.ip = event.ip
this.country = event.country
this.city = event.city
}
}
}
</script>
ip_resolve.vue Component:
<template>
<div class="Hemlo">
</div>
</template>
<script>
const axios = require('axios').default;
const ipRegex = /ip=(\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})$/gmi
export default {
name: 'ip',
props:{
ip: String,
country: String,
City: String,
lat: Number,
long: Number
},
mounted () {
axios.get('https://www.cloudflare.com/cdn-cgi/trace')
.then(response => (
this.ip = ipRegex.exec(response.data)[1]
)
.then(
axios.get('https://cors-anywhere.herokuapp.com/http://api.ipstack.com/'+this.ip+'?access_key=<key>')
.then( response => (
this.lat = response.data.latitude,
this.long = response.data.longitude,
this.country = response.data.country_name,
this.city = response.data.city
).then(
this.$emit('response', {
ip: this.ip,
lat: this.lat,
long: this.long,
country: this.country,
city: this.city
})
)
)
)
)
}
}
</script>
Weather.vue Component:
<template>
<div class="Hi">
<h1>{{msg}} {{city}}, {{country}}</h1>
<h2>Temp: {{ temp }}f</h2>
<h2>Conditions: {{ conditions }}</h2>
</div>
</template>
<script>
const axios = require('axios').default;
export default {
name: 'Weather',
props: {
msg: String,
resp: String,
ip: String,
lat: Number,
long: Number,
city: String,
country: String,
temp: String,
conditions: String
},
mounted () {
axios
.get('https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/<key>/'+this.lat+','+this.long)
.then(response => (
this.resp = response.data,
this.temp = response.data.currently.temperature,
this.conditions = response.data.currently.summary
))
}
}
</script>