web-dev-qa-db-fra.com

Comment rendre axios synchrone

J'utilise axios pour vérifier si un alias n'a pas déjà été utilisé par un autre dans la base de données.

Problème: L'appel ajax n'attend pas la réponse du serveur pour exécuter le code restant.

Le code ressemble à:

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

    },
}

La console affiche le résultat suivant:
1. before checking
3. checked valid, can save now
2. server response:false

Je ne peux pas déplacer le code de la méthode save() dans .then Car je fais d'autres validations sur les données d'entrée telles que des caractères alphanumériques, un minimum de caractères ...

J'ai pu retarder la 3ème partie (if (this.valid) {) en utilisant set setTimeout mais ce n'est pas la meilleure solution. Que se passe-t-il si le serveur prend plus ou moins que le temps d'attente défini?.

Question Est-il possible de faire cet appel séquentiel (1, 2, 3) au lieu de (1, 3, 2)?

javascriptaxios
14
Warrio

Vous ne pouvez pas (ou du moins ne devriez vraiment pas) le rendre synchrone, vous aurez donc besoin d'une voie différente.

Une idée: retourner la promesse d’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;
    });
}

puis appelez then() dans save():

this.checkUniqueness()
.then((returnVal) => {
   // other validations here
  //  save
})
.catch(err => console.log("Axios err: ", err))

Vous pouvez même effectuer toutes vos vérifications au même endroit si vous avez renvoyé la valeur de la fonction then() d'Axios plutôt que de définir le drapeau:

.then((response) => {
    console.log('2. server response:' + response.data.unique)
    return response.data.unique;
 });

puis en sauvegarde:

this.checkUniqueness()
.then((valid) => {
    if (valid) // do something
   // other validations here
   //  save
})
20
Mark Meyer