'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 |
