调用组件时的竞争条件

Question

I have 2 components which are being loaded into an "App", the first component resolves the external ip address to a geo by making 2 axios.get calls and then returns them (via emit) to App.vue.

I then call "Weather" to resolve the lat/long from the previous 2 calls to some json returned by the darksky API for that lat/long. Sometimes (50-60% of the time) I am hitting a race condition where I am sending 0/0 to weather (which are what I initialize lat/long to in App.vue) and don't know how to resolve it. I would like the following code to run more reliably.

App.vue

<template>
  <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
    <ip @response="onResponse" /> //Needs to finish before next line runs (has 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
  },

  //Accepts emitted values from ip_resolve -- needs to change values in data 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

<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

<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>

Answer 1

Typically you would separate out this model logic into its own module, using something like vuex, so the data flow for components is completely uni-directional.

But in this case, the simplest solution is to add a v-if="responseReady" directive to the <Weather> component in App.vue so that it does not get mounted until the data is ready. You will also need to add a boolean flag for this new prop to data and onResponse . Again, this is the quick and dirty solution.

  <Weather v-if="responseReady"  msg="The weather for:" :lat="lat" :long="long" :ip="ip" :city="city" :country="country"/>
...
  data() {
    return {
        lat: 0,
        long: 0,
        ip: 0,
        country: 0,
        city: 0,
        responseReady: false
      }
    }, 
...
    onResponse(event) {
      this.lat = event.lat
      this.long = event.long
      this.ip = event.ip
      this.country = event.country
      this.city = event.city
      this.responseReady = true;
    }