如何使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屋！