Javascript 使用axios的Vue.js异步api调用

我有两个不同版本的代码，但我很难理解为什么第二个版本不能正常工作。 我认为这是一个“背景”问题，但我不明白

在这个版本中，我得到了响应

// Fist version (it works)
methods: {
      async sendDatas() {
            await this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email: this.email,
                },
            })
                .then((response) => {
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

在此版本中，我无法在callApi函数中获取响应数据

sendDatas() {
            this.callApi(this.email)
                .then((response) => {
                    // Here "response" is "undefined"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        async callApi(email) {
            await this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email,
                },
            })
                .then((response) => {
                    // Here "response" is ok"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

async callApi函数返回一个承诺，为什么我不能在sendDatas函数中获取响应的内容

---

谢谢你的帮助：）

我敢肯定你会两次兑现承诺。你能试试吗

sendDatas() {
            this.callApi(this.email)
                .then((response) => {
                    // Here "response" is "undefined"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        async callApi(email) {
            // Removed the `then`
            return this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email,
                },
            });
        },

---

我敢肯定你会两次兑现诺言。你能试试吗

sendDatas() {
            this.callApi(this.email)
                .then((response) => {
                    // Here "response" is "undefined"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        async callApi(email) {
            // Removed the `then`
            return this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email,
                },
            });
        },

---

您的函数

callApi

不返回承诺。您需要退回：

    sendDatas() {
        this.callApi(this.email)
            .then((response) => {
                // Here "response" is "undefined"
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },

    callApi(email) {
        return this.$axios({ // Note the return here
            method: 'post',
            url: '/url',
            data: {
                email,
            },
        })
            .then((response) => {
                // Here "response" is ok"
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },

---

另外，请注意，我删除了wait和async关键字，它们不是必需的，因为您已经使用

then

和

catch

来处理结果。

您的函数

callApi

不会返回承诺。您需要退回：

    sendDatas() {
        this.callApi(this.email)
            .then((response) => {
                // Here "response" is "undefined"
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },

    callApi(email) {
        return this.$axios({ // Note the return here
            method: 'post',
            url: '/url',
            data: {
                email,
            },
        })
            .then((response) => {
                // Here "response" is ok"
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },

---

另外，请注意，我删除了wait和async关键字，它们不是必需的，因为您已经在使用

then

和

catch

来处理结果。

是的，很好：）为什么要删除关键字“async”，我认为声明异步请求是必要的。然后我们总是以承诺的形式得到结果@papillon@BibDev据我所知，async关键字的唯一用途是在其内部启用wait关键字。如果您不需要使用wait，那么您可能也不需要使用async。此外，异步函数总是返回一个承诺。如果它应该返回承诺以外的值，那么它将作为已解析的承诺返回，这解释了为什么可以使用。然后在函数的结果上，即使您没有明确返回承诺。如果你想了解更多，我建议你阅读这个文档，它解释得很好：是的，很好：）为什么要删除关键字“async”，我认为声明一个异步请求是必要的。然后我们总是以承诺的形式得到结果@papillon@BibDev据我所知，async关键字的唯一用途是在其内部启用wait关键字。如果您不需要使用wait，那么您可能也不需要使用async。此外，异步函数总是返回一个承诺。如果它应该返回承诺以外的值，那么它将作为已解析的承诺返回，这解释了为什么可以使用。然后在函数的结果上，即使您没有明确返回承诺。如果你想了解更多，我建议你读一下这篇文章，它解释得很好：谢谢！：）它与

return wait this一起工作。$axios（{

谢谢！：）它与

return wait this一起工作。$axios（{