如何使 axios 同步 [英] How to make axios synchronous

问题描述

我正在使用 axios 检查数据库中的别名是否已被另一个人使用.

I'm using axios to check if an alias has not already been used by another in the database.

问题:ajax 调用不会等待服务器响应来执行剩余的代码.

Problem: The ajax call doesn't wait for the server response to execute the remaining code.

代码如下:

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 中，因为我对输入数据进行了其他验证，例如字母数字字符、最少字符数...

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...

我能够使用 set setTimeout 延迟第三部分(if (this.valid) {)，但这不是最好的解决方案.如果服务器花费的时间多于或少于定义的等待时间怎么办..

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..

问题 有没有办法让这个调用按顺序(1, 2, 3)而不是(1, 3, 2)?

Question Is there a way to make this call sequential (1, 2, 3) instead of (1, 3, 2)?

推荐答案

你不能(或者至少真的不应该)让它同步，所以你需要一种不同的前进方式.

You can't (or at least really shouldn't) make it synchronous, so you'll need a different way forward.

一个想法:从 Axios 返回承诺:

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

然后在save()中调用then():

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

如果您从 Axios 的 then() 返回值而不是设置标志，您甚至可以在一个地方进行所有检查:

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

然后在保存:

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

这篇关于如何使 axios 同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！