I'm using axios to check if an alias has not already been used by another in the database.
Problem: The ajax call doesn't wait for the server response to execute the remaining code.
The code looks like :
export default {
data () {
return {
id: null,
alias: null,
valid: true,
}
},
methods: {
// triggered by the save button
save () {
this.valid = true;
console.log('before checking');
this.checkUniqueness();
// other validations here
if (this.valid) {
console.log('3. checked valid, can save now');
// save now
}
},
checkUniqueness () {
axios.get('/api/unique/alias', {
params: {
id: this.id,
alias: this.alias,
}
})
.then((response) => {
console.log('2. server response:' + response.data.unique)
this.valid = response.data.unique;
});
},
},
}
The console shows the following result:
1. before checking
3. checked valid, can save now
2. server response:false
I cannot move the code of the save() method into .then because I do other validations on the input data such as alpha-numeric characters, minimum of characters...
I was able to delay the 3rd part (if (this.valid) {) using set setTimeout but it's not the best solution. what if the server takes more or less than the defined waiting time..
Question Is there a way to make this call sequential (1, 2, 3) instead of (1, 3, 2)?
Answer
You can't (or at least really shouldn't) make it synchronous, so you'll need a different way forward.
One idea: return the promise from Axios:
checkUniqueness () {
return axios.get('/api/persons/unique/alias', {
params: {
id: this.id,
alias: this.alias,
}
})
.then((response) => {
console.log('2. server response:' + response.data.unique)
this.valid = response.data.unique;
});
}
and then call then() on it in save():
this.checkUniqueness()
.then((returnVal) => {
// other validations here
// save
})
.catch(err => console.log("Axios err: ", err))
You could even do all your checking on one place if you returned the value from Axios's then() rather than setting the flag:
.then((response) => {
console.log('2. server response:' + response.data.unique)
return response.data.unique;
});
then in save:
this.checkUniqueness()
.then((valid) => {
if (valid) // do something
// other validations here
// save
})