web-dev-qa-db-ja.com

axiosを同期させる方法

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に移動できない.

Set setTimeoutを使用して3番目の部分（if (this.valid) {）を遅らせることができましたが、それは最善の解決策ではありません。サーバーが定義された待機時間よりも長くまたは短くかかる場合はどうなりますか。

質問この呼び出しを（1、3、2）の代わりに順次（1、2、3）にする方法はありますか？

javascriptaxios
14
Warrio

同期化することはできません（少なくとも実際はそうすべきではありません）。したがって、別の方法が必要になります。

1つのアイデア：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))

フラグを設定するのではなく、Axiosのthen()から値を返した場合、1つの場所ですべてのチェックを行うこともできます。

.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
})
20
Mark Meyer