Vue.js Multiple API Call with relation

Question

I have this structure folder:

components/
  character.vue

pages/
  teams/
    _id.vue

In the _id.vue file I have a mounted function to get the team with a specific ID:

data () {
  return{
    id: this.$route.params.id,
    team: [],
  }
},
mounted () {
  axios.get(`https://example.com/admin/wp-json/wp/v2/teams/${this.id}`)
    .then(response => {
      this.team = response.data
  }),
}

Here in this stage I have the team object.

What I want to do is to bring one more object who has related with team object in this page and carry to character component.

I want to call this URL https://example.com/admin/wp-json/wp/v2/character/{character_id} and get the specific character object who belong to the team.

The character ID is in the team.acf.acf_choose_character.

I believe that what I am asking for has been understood.

Thanks in advance!

Below is the team object:

"acf": {
  "acf_choose_character": [
    11
  ],
  "acf_choose pathways": [
    159,
    166,
    167
  ],
  "acf_team_final_score": ""
},

BTL · Accepted Answer · 2021-12-13 15:53:11Z

1

You can make a second axios call in the callback of the first one.

mounted () {
  axios.get(`https://example.com/admin/wp-json/wp/v2/teams/${this.id}`)
    .then(response => {
      this.team = response.data
      axios.get(`https://example.com/admin/wp-json/wp/v2/character/${this.team.acf.acf_choose_character[0]}`)
        .then(response2 => {
          this.character = response2.data
      }),
  }),
}

If you want to escape the callback hell, you can use ES6 async/await

async mounted () {
  const response = await axios.get(`https://example.com/admin/wp-json/wp/v2/teams/${this.id}`)
  this.team = response.data

  const response2 = await axios.get(`https://example.com/admin/wp-json/wp/v2/character/${this.team.acf.acf_choose_character[0]}`)
  this.character = response2.data
}

answered Dec 13, 2021 at 15:53

BTL

4,7243 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Estus Flask Over a year ago

These snippets aren't equivalent. Promise pattern is supposed to help with callback hell. The latter could be avoided in snippet 1 by chaining promises correctly and avoiding nested then.

Collectives™ on Stack Overflow

Vue.js Multiple API Call with relation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related