Vue.js 与 axios 的异步 api 调用答案

【问题标题】：Vue.js asynchronous api call with axiosVue.js 与 axios 的异步 api 调用
【发布时间】：2021-07-17 13:15:38
【问题描述】：

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

在这个版本中我得到了回应

// 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函数返回promise，为什么sendDatas函数中取不到response的内容？

感谢您的帮助:)

【问题讨论】：

标签： javascript api vue.js axios

【解决方案1】：

您的函数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)
            })
    },

另外，请注意，我删除了 await 和 async 关键字，因为您已经使用 then 和 catch 来处理结果，所以这不是必需的。

【讨论】：

是的，很好:) 为什么要删除关键字“async”，我认为声明异步请求是必不可少的。然后我们总是得到一个承诺形式的结果。 @papillon
@BibDev 据我所知，async 关键字的唯一用途是在其中启用 await 关键字。如果您不需要使用等待，那么您可能也不需要使用异步。此外，异步函数总是返回一个承诺。如果它应该返回一个不是 Promise 的值，那么它将作为一个已解决的 Promise 返回，这解释了为什么即使您没有明确地从它返回一个 Promise，您也可以在您的函数的结果上使用 .then。如果您想了解更多信息，我建议您阅读这个解释得很好的文档：javascript.info/async-await

【解决方案2】：

我很确定你会两次返回承诺。你可以试试：

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,
                },
            });
        },

【讨论】：

谢谢！ :) 它适用于return await this.$axios({