如何使axios同步

ca1c2owp 于 2023-10-18 发布在 iOS

关注(0)|答案(3)|浏览(120)

我使用axios来检查一个别名是否已经被数据库中的另一个别名使用过。

问题：apache调用并不等待服务器响应来执行剩余的代码。

代码如下所示：

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来延迟第三部分（if (this.valid) {），但这不是最好的解决方案。如果服务器占用的时间大于或小于定义的等待时间，该怎么办？

Question有没有办法让这个调用是顺序的（1，2，3）而不是（1，3，2）？

axios

来源：https://stackoverflow.com/questions/46347778/how-to-make-axios-synchronous

3条答案

按热度按时间

cqoc49vn1#

您不能（或者至少不应该）使其同步，因此您需要一种不同的前进方式。
一个想法：返回Axios的promise：

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()返回值，而不是设置标志：

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

赞(0）回复(0）举报 2023-10-18

twh00eeo2#

axios.get(...)返回一个promise（一个稍后承诺的任务），你可以等待解释器直到这个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

赞(0）回复(0）举报 2023-10-18

omvjsjqw3#

你可以像对待任何JavaScript Promise一样对待Axios-只要做（mozilla）JS文档显示的事情。

请小心使请求同步，因为它可能会冻结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
            }
        }

赞(0）回复(0）举报 2023-10-18

我来回答

如何使axios同步

3条答案

相关问题

热门标签

最新问答