Frage Wie man Axios synchron macht


Ich verwende Axios, um zu überprüfen, ob ein Alias ​​noch nicht von einem anderen in der Datenbank verwendet wurde.

Problem: Der Ajax-Aufruf wartet nicht auf die Serverantwort, um den verbleibenden Code auszuführen.

Der Code sieht folgendermaßen aus:

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

    },
}

Die Konsole zeigt folgendes Ergebnis:
1. before checking
3. checked valid, can save now
2. server response:false

Ich kann den Code der. Nicht verschieben save() Methode in .then weil ich andere Validierungen für die Eingabedaten mache, wie zB alphanumerische Zeichen, Minimum an Zeichen ...

Ich konnte den 3. Teil verzögern (if (this.valid) {) Verwenden von Set setTimeout aber es ist nicht die beste Lösung. was ist, wenn der Server mehr oder weniger als die definierte Wartezeit braucht.

Frage Gibt es eine Möglichkeit, diesen Anruf sequenziell (1, 2, 3) anstelle von (1, 3, 2) zu machen?


5
2017-09-21 15:25


Ursprung


Antworten:


Du kannst es nicht (oder zumindest nicht wirklich) synchron machen, also brauchst du einen anderen Weg.

Eine Idee: Gebe das Versprechen von Axios zurück:

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

und dann ruf an then() darauf in save():

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

Sie können sogar alle Ihre Prüfungen an einer Stelle durchführen, wenn Sie den Wert von Axios zurückgegeben haben then() anstatt die Flagge zu setzen:

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

dann sicher:

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

8
2017-09-21 15:32