[Docs/Examples] Data Fetching Example has Race Condition

[jacobp100]

Version

3.0.2

Reproduction link

https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation

Steps to reproduce

Load the page with ?id=abc
Have the initial getPost request take 3 seconds to complete
After 1 second, navigate to the page again, but with ?id=def
Have the subsequent getPost request take 1 second to complete
Wait 2 seconds

What is expected?

We show the data for id=def

What is actually happening?

We show the data for id=abc

---

I'm not sure what the correct fix is

[LinusBorg]

We coulduse a closure to check if we are still on that id's page:

  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      const id = this.$route.params.id
      // replace `getPost` with your data fetching util / API wrapper
      getPost(id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else if (id === this.$route.params.id) {
          this.post = post
        }
        // if the params id changed, the data we loaded is stale and we don't do anything.
      })
    }
  }