Problems using values after axios

Question

I am sorry if this problem is already solved somewhere but I can't wrap my head around what my problem is. In my scenario I want to make 2 axios calls and do some stuff with the two data responses before the page is finally rendered. If I output the data in my template it is visible but when I want to use it before the page is rendered the value is always undefined. After some research I came up with the following solution:

 created() {
   this.getStuff()

},


methods: {
    async getStuff(){
        this.Stuff1= await this.getSomething1()
        this.Stuff2= await this.getSomething2()
        
        var test = this.Stuff1[2].name 
        console.log(test)
    },

    async getSomething1(){
        const response=await axios.get('http://localhost:4000/apiSomething1');
        return response.data;
    },

    async getSomething2(){
       const response=await axios.get('http://localhost:4000/apiSomething2');
       return response.data;
   },
}

If I want to do something with these values for example pass it to another value it wont work because Stuff1 is undefined. Why is that the case? In my understanding the async functions should wait until the promise is finished because of await so the value should exist after the 2 awaits in getStuff() but this is not the case. I am really thankful for any help!

Edit I tried both solutions mentioned but getting the same mistake. For clearness I added the whole code.

<template>
  <h3>List all players</h3>
  <br />
  <table>
    <tr v-for="player in PlayerAll" :key="player._id">
      <td>{{ player.lastname }}</td>
      <td>{{ player.name }}</td>
      <td>{{ player.birthdate }}</td>
      <td>{{ player.hash }}</td>
      <td>
        <Button
          @click="deleteSpieler(player._id)"
          class="p-button-danger"
          label="Delete Player"
        />
      </td>
    </tr>
  </table>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      PlayerAll: [],
      TeamAll: [],
      Combined: [],
    };
  },

  async created() {
    await this.fetchData();
    var test = this.TeamAll[2].name;
    console.log(test);
  },

  methods: {
    async fetchData() {
      let requests = [];
      try {
        requests = await axios.all([
          axios.get("http://localhost:4000/apiPlayer"),
          axios.get("http://localhost:4000/apiTeam"),
        ]);
      } catch (e) {
        console.error(e);
      }
      this.PlayerAll = requests[0].data;
      this.TeamAll = requests[1].data;
    },
  },
};
</script>

<style scoped>
.btn-success {
  width: 150px;
  height: 150px;
  background: red;
}
</style>

I don't know how you generally set state in vue but just looking at the way you are getting your data, it should be correct. — FireFighter
– FireFighter, Commented Apr 18, 2021 at 19:47
So I have to use state management for that ? I only declared 2 arrays in the data property to which I am passing the responses — lela_98
– lela_98, Commented Apr 18, 2021 at 20:15
I think you also need to await this.getStuff() inside the created() method. — FireFighter
– FireFighter, Commented Apr 18, 2021 at 20:39

Girl Codes · Accepted Answer · 2021-04-18 22:47:59Z

1

I think you should use a promise as so this means once the axios call is done you fill the data and not before it happens I saw that in you edit u added console.log in created that doesn't work for sure because it happens before the data is fetched in the code i offered i added v-if on the table that way you will avoid any error in the console for rendering this before the data is fetched, I used mounted instead of created because it is called after DOM has been mounted, this should work and let me know if you have any problems

<template>
  <h3>List all players</h3>
  <br />
  <table v-if="PlayerAll">
    <tr v-for="player in PlayerAll" :key="player._id">
      <td>{{ player.lastname }}</td>
      <td>{{ player.name }}</td>
      <td>{{ player.birthdate }}</td>
      <td>{{ player.hash }}</td>
      <td>
        <Button
          @click="deleteSpieler(player._id)"
          class="p-button-danger"
          label="Delete Player"
        />
      </td>
    </tr>
  </table>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      PlayerAll: null,
      TeamAll: [],
      Combined: [],
    };
  },

  mounted() {
    this.getStuff();
  },

  methods: {

    getStuff(){
        let vm = this;

        Promise.all([vm.getSomething1(), vm.getSomething2()]).then((values) => {
            vm.PlayerAll= = values[0].data
            vm.TeamAll = values[1].data
        });
    },

    async getSomething1(){
        return await axios.get('http://localhost:4000/apiPlayer');
    },

    async getSomething2(){
        return await axios.get('http://localhost:4000/apiTeam');
    },
};
</script>

<style scoped>
.btn-success {
  width: 150px;
  height: 150px;
  background: red;
}
</style>

edited Apr 18, 2021 at 22:47

answered Apr 18, 2021 at 21:08

Girl Codes

3884 silver badges19 bronze badges

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

7 Comments

lela_98 Over a year ago

I am getting a reference error: "response is not defined" and also "cannot read the property 2 of undefined"

lela_98 Over a year ago

Now I am getting only the type error "cannot read the property 2 of null" for Player All and for TeamAll the value is undefined.

Girl Codes Over a year ago

Try to console.log(response) to see if everything is correct from the api before setting

lela_98 Over a year ago

Getting status 200 and all the correct values as data

Girl Codes Over a year ago

next step would be under the console.log(response) do vm.playerAll = response.data; and then console.log(vm.playerAll); check if this step is covered

|

motoquick · Accepted Answer · 2021-04-18 20:59:30Z

1

The created() method should be asynchronous too. Try adding the async keyword. Also catching errors would be a good idea too; in my experience Axios can generate meaningless errors and not even log them.

Use Promise.all() when fetching from multiple endpoints, it works with Promises and it's better than just spamming multiple awaits.

async created() {
  await this.fetchData();
}

async fetchData() {
  let requests = [];
  try {
    requests = await Promise.all([axios.get('/api1'), axios.get('/api2')]);
  catch (e) {
    console.error(e);
  }
  this.data1 = requests[0].data;
  this.data2 = requests[1].data;
}

edited Apr 18, 2021 at 20:59

answered Apr 18, 2021 at 20:33

motoquick

1281 silver badge7 bronze badges

4 Comments

ssc-hrep3 Over a year ago

axios.all() is deprecated in favor of Promise.all().

lela_98 Over a year ago

I tried axios.all() and Promise.all() but I am getting the same problem

motoquick Over a year ago

@lela_98 are there any errors on the Console?

lela_98 Over a year ago

@motoquick No, there arent any errors. It simply outputs undefined for my console.log(test) . Also accessing the values in the template is no problem.

Collectives™ on Stack Overflow

Problems using values after axios

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related