Question

我正在使用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 if (this.valid) {延迟第3部分（setTimeout），但这不是最好的解决方案。如果服务器花费多于或少于定义的等待时间怎么办？

问题有没有办法让这个呼叫顺序（1,2,3）而不是（1,3,2）？

Answer 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()返回值而不是设置标记，您甚至可以在一个地方进行所有检查：

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

Answer 2

如果您按照JS文档（mozilla）的说明进行操作，则可以将Axios视为另一项承诺。 请注意使请求同步，因为它会冻结UI和应用程序的其余部分。

       async save () {
            this.valid = true;
            console.log('before checking');

            const isUnique = await this.checkUniqueness();
            console.log(isUnique); // => value waited for and returned from this.checkUniqueness()
            // other validations here

            if (this.valid) {
                console.log('3. checked valid, can save now');
                // save now
            }
        }

Answer 3

axios.get(...)返回一个 promise（一个承诺待日后完成的任务），您可以等待解释器，直到该承诺以ES6 +中的await字结尾：

let response = await axios.get(...)

但是axios.get(...)返回响应，而axios.get(...).then(...)返回您要返回的内容。因此，如果您没有在then part中返回任何内容，它将为undefined：

let response = await axios.get(...).then() // nothing returns in then
console.log(response) // undefined

如何使axios同步

3 个答案: