How can I wait until a variable is available?

Question

I created plugin that let me check if user has permission to do some action. Plugin use axios to check permission on server and return true or false.

But I have a problem because "if" statement dosen't wait for function "$guard()" is completed. And as a result I have information "Promise { : "pending" }" instead of boolean.

publicGame()
{
                console.log(this.$guard('Moderate games'));
                if(this.$guard('Moderate games') === true){
                    console.log('can')
                }else{
                    console.log('can not')
                }
}

plugin:

export default {
    Auth,
    install (Vue, options) {
        Vue.prototype.$guard = async function(permission){
           await axios.post('/permission',{permission: permission},{ headers: {
                'X-Requested-With': 'XMLHttpRequest',
                "X-CSRF-TOKEN": Auth.state.token
            }}).then(response=>{                
                return response.data.access === 1;
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
}

So how to fix this function to wait for ajax request complete?

Thank you.

Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — zero298, Oct 18 '18 at 14:35

score 0 · Answer 1 · answered Oct 18 '18 at 14:30

Make publicGame async:

async publicGame()

use await on your this.$guard function:

const valid = await this.$guard('Moderate games')

Then use an if statement on valid:

if (valid) {
   //now it works.
}

You're ignoring the promise on your code, but we're using the async/await pattern here.

score 0 · Answer 2 · answered Oct 18 '18 at 14:37

You have to handle you desired behaviour inside the $guard action response. You can add additional field options and execute them, for example

export default {
    Auth,
    install (Vue, options) {
        Vue.prototype.$guard = async function(permission, options){
           await axios.post('/permission',{permission: permission},{ headers: {
                'X-Requested-With': 'XMLHttpRequest',
                "X-CSRF-TOKEN": Auth.state.token
            }}).then(response=>{                
                if (options.on_success != undefined) {
                   options.on_success(response.data.access === 1);
                }
            }).catch(function (error) {
                if (options.on_error != undefined) {
                   options.on_error(error);
                }
            });
        }
    }
}

Then when you call the $guard function you define what to do on_success and on_error

publicGame()
{
                this.$guard('Moderate games', {
                  on_success: function(can) {
                    if(can){
                      console.log('can');
                    } else {
                      console.log('can not');
                    }
                  },
                  on_error: function(error) {
                    console.log("Error: ", error);
                  }
                })
}

How can I wait until a variable is available?

2 Answers2