[解決済み] アクシオスを同期させる方法

質問

axiosを使用して、あるエイリアスがデータベース内の別のエイリアスによってすでに使用されていないかどうかをチェックしています。

問題点 : ajax呼び出しは、残りのコードを実行するために、サーバーの応答を待機しません。

コードは次のようになります。

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

    },
}

コンソールに以下のような結果が表示されます。

1. before checking
3. checked valid, can save now
2. server response:false

のコードを移動することができません。 save() メソッドを .then なぜなら、入力データに対して、英数字や最小文字数など、他の検証を行うからです。

3番目の部分を遅らせることができました( if (this.valid) { を使用しています。 setTimeout しかし、それは最善の解決策ではありません。

質問 この呼び出しを (1, 3, 2) ではなく、(1, 2, 3) の順次呼び出しにする方法はありますか？

解決方法を教えてください。

同期させることはできない（少なくとも本当にしてはいけない）ので、別の方法が必要です。

一つのアイデアとして、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;
    });
}

を呼び出して then() の中で、その上に save() :

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

の値を返せば、すべてのチェックを一箇所で行うこともできます。 then() フラグを設定するのではありません。

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

を選択し、保存で

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