javascript - 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 Hook 并调用 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 显示您的响应。

更新

请求链接票证，简单示例:

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