Question

我无法在axios承诺中调用任何外部函数。我的错误是

[Uncaught（in promise）TypeError：this.showNotification不是函数]

showNotification是mixin中的外部函数，但我无法在userCompInfo函数中调用它

var mixin = {
 methods: {
//function to get all user info
userInfo:function(){
    //alert(localStorage.getItem("sessionKey"))
    if(localStorage.getItem("sessionKey")==null)
        session = "null";
    else
        session= localStorage.getItem("sessionKey");

    return axios.post("/api/user/info",{
         user_id:localStorage.getItem("userId"),
         session_key:session             
    });

},
//function to get all competition info
compInfo:function()
{   //calling API competition info to get the avaliable competition for now
    return axios.post("/api/competition/info",{
        lang:source.lang                
    });

},
userCompInfo:function()
{
    axios.all([this.userInfo(),this.compInfo()])
    .then(axios.spread(function (user, comp){
        if(comp.data.result.errorcode == 0)
        {
            source.competition = comp.data.competiton_detail; 

        }   

        //set the user id in local storage
        localStorage.setItem("userId",user.data.user_info.user_id);
        //check on session key to save it in local storage
        if(user.data.user_info.session_key != "") // for testing
            localStorage.setItem("sessionKey",user.data.user_info.session_key);

        // get user data successfuly
        if(user.data.result.errorcode == 0)
        {   //set response data in user
            source.user = user.data.user_info;
            //to set this user status
            this.renderUserInfo();
            ///////////
            //source.competition.is_active=1;
            //check on user status to show notification
            if(source.user.vip && source.user.suspended)
            {
                this.showNotification(context.suspended_vip.title+" "+source.user.msisdn, context.suspended_vip.body,["btn_notifi_ok"]);
            }
            //check if this valid competition is active or not to show notification according to it and to user status
            if(source.competition.is_active==1)
            {   
                if(source.user.registered && newUser==1)
                {
                    this.showNotification(context.registered_firstTime.title, context.registered_firstTime.body, ["btn_notifi_start_play"]);
                }
                else if(source.user.free && source.user.newFreeUser) 
                {
                    this.showNotification(context.freeUser_firstTime.title, context.freeUser_firstTime.body, ["btn_notifi_start_play"]);
                }
            }
        }

    }));
},
// function to show notification modal
showNotification:function(title, body, buttons)
{
    //to hide all modal buttons first
    $("#notification").find(".btn").hide(); 
    //set the modal title  
    $("#notification_title").html(title);
    //set the modal body
    $("#notification_body").html(body);
    //for on buttons array to show all buttons that we want
    for(i=0;i<buttons.length;i++)
    {
        $("#notification").find("#"+buttons[i]).show();
    }   
    //to display modal 
    $("#notification").modal("show");
},
//function to show the current user statue VIP, registered,free or suspended
renderUserInfo:function()
{   // intialize all flags of user status to false
    source.user.vip = false;
    source.user.registered = false;
    source.user.free = false;
    //check on user mode and set the according flag to it to true
    if(source.user.sub_mode == "vip")
    {
        source.user.vip = true;
    }
    else if(source.user.sub_mode == "sub")
    {
        source.user.registered = true;
    }
    else
    {
        source.user.free = true;
    }   
},}}

Answer 1

这是一个非常常见的错误。 this中的userCompInfo并未引用Vue，因为您已经编写了回调函数。

在您的代码中，进行此更改。

userCompInfo:function()
{
    axios.all([this.userInfo(),this.compInfo()])
    .then(axios.spread(function (user, comp){
        // a bunch of code...
    }.bind(this)));
},

或

userCompInfo:function()
{
    let self = this;
    axios.all([this.userInfo(),this.compInfo()])
    .then(axios.spread(function (user, comp){
        // a bunch of code...
        self.showNotification(...)
        // some more code...
    }));
},

请参阅How to access the correct this inside a callback?

如何在VueJS中调用axios.spread函数中的外部函数？

1 个答案: