axios.all shows a function as undefined

Question

Hey guys I am using axios.all within my vuejs and javascript code. But when the page is loaded none of the content can be seen and within the chrome console it says:

[nuxt]Error while initializing app ReferenceError: getAllTicketGroups is not defined.

I am not sure why this is happening.

Below is the JavaScript code that I am using.

<script>
import axios from 'axios';
export default {
    layout: 'Account',
    components:{
        'accountTickets' : TicketsAccountTickets
    },

    data(){
        return{
            allTickets: [],
            event_id  : this.event_id,
            getTickets:{
                seeTickets:{
                    event_id : this.event_id
                }
            },
            findTickets: {},
            eventsId: [],
        }
    },

    mounted:{
        getAllTicketGroups: function(){
            return axios.get('https://api.ticketpass.co/tickets',{
                headers:{
                    "Content-Type" : "application/json",
                    "Accept" : "application/json"
                }
            })
            .then(response =>{
                if(response.status === 200){
                    for(let i = 0; i < response.data.length; i++){
                        console.log(response.data[i].event_id);
                        this.allTickets.push({
                            "some_id" : response.data[i].id,
                            "event_id" : response.data[i].event_id,
                            "created" : response.data[i].created,
                            "code" : response.data[i].code,
                            "user_id" : response.data[i].user_id
                        })

                        this.getTickets.seeTickets = {
                        "event_id" : response.data[i].event_id
                        }
                    }
                }
            })
        },

        getEventId: function(){
            if(!(response.data[i].event_id in this.findTickets) && this.eventsId.indexOf(response.data[i].event_id) == -1){
                return axios.get('https://api.ticketpass.co/event/' + response.data[i].event_id,{
                    headers:{
                        "Content-Type" : "application/json",
                        "Accept" : "application/json",
                        "Authorization" : this.accessToken
                    }
                })
                .then(response => {
                    console.log(response.data);
                    this.findTickets[response.data.id] = response.data;
                })
                console.log("Data Added");
            }else{
                console.log("IN Object");
            }
            console.log(this.findTickets);
        }
    }
}

axios.all([getAllTicketGroups(), getEventId()])
.then(axios.spread(function (list, got){
    console.log(list);
    console.log(got);
}));
</script>

If someone could please help it would be much appreciated.

Many thanks.

Answer 1

Your Vue structure and some logic parts are incorrect:

1. You should rename your mounted section to methods I think it's typo.

2. You can not call methods with way you provide in your question, place your initial request to mounted or created hook and invoke methods on this :

   mounted() {
      axios.all([this.getAllTicketGroups(), this.getEventId()])
         .then(axios.spread(function (list, got){
            console.log(list);
            console.log(got);
         }));
   }
   

3. Also you reference some response variable in the top of getEventId method which will always be undefined because it is not declared.

4. Also you does not see anything in console after main request finished successfully because you don't return anything in getAllTicketGroups and getEventId "thens". So you should re-return your response in then to make console.log display your response.

UPDATE

5. Request chaining for tickets, quick example:

    mounted() {
   
      this.getAllTicketGroups().then((response) => {
          let requests = [];
          this.allTickets.forEach((t) => {
             requests.push(this.getEventId(t.event_id));
          });
          return axios.all(requests);
      });
    }
    ...
    getEventId: function(event_id){
       if(!(event_id in this.findTickets) && 
         this.eventsId.indexOf(event_id) == -1){
           return axios.get('https://api.ticketpass.co/event/' + event_id,{
               headers:{
                   "Content-Type" : "application/json",
                   "Accept" : "application/json",
                   "Authorization" : this.accessToken
               }
           })
           .then(response => {
               console.log(response.data);
               this.findTickets[response.data.id] = response.data;
           })
           console.log("Data Added");
       }else{
           console.log("IN Object");
       }
       console.log(this.findTickets);
   }