axios.all 显示函数未定义

Question

大家好，我在我的 vuejs 和 javascript 代码中使用 axios.all。但是当页面加载时 none 可以看到内容，并且在 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 结构和一些逻辑部分不正确：

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

您不能使用您在问题中提供的方式调用方法，请将您的初始请求置于 mounted 或 created 钩子上并调用 this 上的方法：

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

你还在 getEventId 方法的顶部引用了一些 response 变量，它总是 undefined 因为它没有声明.
此外，在主请求成功完成后，您在控制台中看不到任何内容，因为您在 getAllTicketGroups 和 getEventId [=51= 中没有 return 任何内容].所以您应该重新return您在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);
}

axios.all 显示函数未定义

axios.all shows a function as undefined

javascript

function

referenceerror

vue.js

axios