Axios 返回未决承诺

Question

找了3天的答案，终于决定自己问了。 我正在使用 Nuxt JS 和 Riot API，并且对它们都很陌生。 我想获取数据，然后返回它以将其存储在我以后可以使用的另一个变量中。 当我尝试直接从我的函数内部控制台记录数据时，它可以工作并且我可以看到我想要的数据。 但是当我尝试退货时，它给了我这个答案

这是我的功能

mounted() {
  console.log(this.fetchSomething())
},

methods: {
    async fetchSomething() {
        const test = await this.$axios.get('/api/')
        .then((res) => {
            return res.data;
        })
        console.log(test) // this works
        return test // this gives me a pending promise
        
    },
}

更新

感谢 jfriend00 的惊人回答，更正了我的代码，但最重要的是向我解释出了什么问题。 我现在对我的错误有了更好的理解。

更正的代码

async mounted() {
  const gettest = await this.fetchSomething()
  console.log(gettest)
},

methods: {
  async fetchSomething() {
            const test = await this.$axios.get('/api/');
            //console.log(test.data);
            return test.data;            
        },
},

Answer 1

所有async函数都返回一个承诺。 async函数内的返回值成为返回的承诺的解析值。 如果async函数内部有一个await ，那么一旦解释器遇到函数中的第一个await ，该函数就会返回一个 promise。 如果函数中没有await语句，它仍会返回一个承诺，无论您的返回值是什么，该承诺都会立即解决。

请记住， await暂停async函数的内部执行。 它不会停止调用者的执行。 在第一次await ，调用者得到一个挂起的承诺，调用者继续执行。 调用者必须自己使用await或.then()来从async函数中获取返回值。

以下是您的async函数中逐步发生的事情”

1. 你调用this.fetchSomething() 。
2. 当它开始执行时， this.$axios.get('/api/')被执行并返回一个 promise，然后解释器处理await thatPromise 。 在第一次await ，函数执行被挂起，函数立即返回一个未解决和挂起的承诺。
3. 您的console.log()看到该挂起的承诺，因为该函数现已返回
4. 一段时间后， axios.get().then(...)完成并解析它返回的承诺，因此await完成并将该axios.get().then()承诺的解析值分配给您的变量test . test中的值是.then()返回值的结果
5. 最后，记录test的值，然后返回test的值。
6. 该返回值成为已从async函数返回的承诺的已解析值，然后该承诺将使用该值进行解析。

如果你仔细查看你的两个console.log()语句，你会看到这个console.log(this.fetchSomething())首先发生，因为这是函数命中await然后立即返回挂起的承诺的地方。 您的第二个console.log(test)在await完成等待 axios 承诺之后发生。

仅供参考，许多人不喜欢混用await和.then() （尽管这不会改变您所询问的结果 - 这只是一个样式问题），您可以像这样编写函数：

methods: {
    async fetchSomething() {
        const test = await this.$axios.get('/api/');
        console.log(test.data);
        return test.data;            
    },
}

或者，甚至这个：

methods: {
    async fetchSomething() {
        const {data} = await this.$axios.get('/api/');
        console.log(data);
        return data;            
    },
}