Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs/Examples] Data Fetching Example has Race Condition #2691

Open
jacobp100 opened this Issue Apr 1, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@jacobp100
Copy link

jacobp100 commented Apr 1, 2019

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

This comment has been minimized.

Copy link
Member

LinusBorg commented Apr 1, 2019

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.
      })
    }
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.