axios.all 将函数显示为未定义

Question

大家好，我在我的 vuejs 和 javascript 代码中使用 axios.all。但是当页面加载时，看不到任何内容，并且在 chrome 控制台中显示：

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

我不确定为什么会这样。

以下是我正在使用的 JavaScript 代码。

<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>

如果有人可以帮忙，将不胜感激。

非常感谢。

Answer 1

你的 Vue 结构和一些逻辑部分不正确：

1. 您应该将mounted 部分重命名为methods 我认为这是错字。

2. 您不能以您在问题中提供的方式调用方法，将您的初始请求发送到mounted 或created 挂钩并在this 上调用方法：

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

3. 此外，您在 getEventId 方法的顶部引用了一些 response 变量，该变量将始终未定义，因为它未声明。

4. 此外，在主请求成功完成后，您在控制台中看不到任何内容，因为您在 getAllTicketGroups 和 getEventId“thens”中没有返回任何内容。所以你应该在then重新回复你的回复，让console.log显示你的回复。

更新

5. 请求链接门票，快速示例：

    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);
   }