How to make axios synchronous

Question

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 1

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 }) 

Answer 2

If you just do what JS docs (mozilla) show you can treat Axios as just another promise. Be careful about making the request synchronous bc it can freeze the UI and the rest of your app.

       async save () {             this.valid = true;             console.log('before checking');              const isUnique = await this.checkUniqueness();             console.log(isUnique); // => value waited for and returned from this.checkUniqueness()             // other validations here              if (this.valid) {                 console.log('3. checked valid, can save now');                 // save now             }         }