我关于 Axios 和功能的 Vue.js 代码不起作用

Question

我想在 axios 之后执行 function2。我没有捕获错误。但仍然没有执行 Function2。

我想要但不起作用的代码：

   add: function () {
        axios.post('/add', this.person)
            .then(response => {
               if (response.data.etat) {
                    this.person = {};
                    this.function2();
                }
            })
            .catch(error => {
                console.log('errors: ', error)
            })},

这是可行的，但我只想在 axios 通过时执行 function2。

add: function () {
        axios.post('/add', this.person)
            .then(response => {
               if (response.data.etat) {
                    this.person = {};

                }
            })
            .catch(error => {
                console.log('errors: ', error)
            })
             this.function2();
             },

有什么帮助吗？谢谢 ！

Answer 1

您可以链接 .then() 块：

add: function () {
        axios.post('/add', this.person)
            .then(response => {
               if (response.data.etat) {
                    this.person = {};
                }
            })
            .then(() => {
               this.function2();
            })
            .catch(error => {
                console.log('errors: ', error)
            })
}

this.function2 只有在你的 axios.post 成功并且第一个 .then() 没有抛出任何错误时才会被调用。在另一种情况下 - 您的 .catch() 将捕获错误。

在这里你可以看到它是如何在现场工作的： https://codepen.io/anon/pen/gZQyym?editors=1111

Answer 2

由于您使用 axios 发布数据，并且您希望在操作成功完成后调用该方法，因此您应该检查响应状态，例如：

   add: function () {
    axios.post('/add', this.person)
        .then(response => {
           if (response.status==200) {
                this.person = {};
                this.function2();
            }
        })
        .catch(error => {
            console.log('errors: ', error)
        })},