'How can i can wait to call function before updating the data in Vue js?

I have two API get methods. The first is to check if the user is an admin. The second is to call all the user lists.

But I am having a hard time calling first; It always calls all the user lists before I check if the user is admin or not.

What I did was

 async mounted() {
            await this.getCurrentUser();
        }

and method to check if user is admin:

getCurrentUser(){
                Common.getUser().then(data => {
                    if(!data.admin){
                        this.isAdmin = false;
                    }
                });
            },

method to get all users:

paging: function (pageNumber) {

                vm.requestParam.page = pageNumber == undefined ? 
                
                var param = Common.param(vm.requestParam);

                axios.get('/api/users?' + param).then(function (response) {
                  ///

                    }                       

                })
                    .catch(function (error) {
                        console.log(error.response);
                    });
            },

and the data is:

data: {
            resources: {},
         
           'requestParam': {
                'id': '',
                'query': '',
                'accessLevel': '',
                'page': 1
            },`


Solution 1:[1]

The problem is that promise chains are broken, so await has no effect. As a rule of thumb, a function that involves promises should return a promise that represents the end of its job. It should be:

return Common.getCurrentUser()...

and

return axios.get('/api/users?' + param)...

Callback-based nextTick can result in race condition. In case it affects other methods, it should be a promise, too:

await this.$nextTick();
vm.getResources();
...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Estus Flask