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/') 被执行并返回一个承诺，然后解释器处理await thatPromise。在第一个await 处，函数执行被暂停，函数立即返回一个未解决的待处理承诺。
3. 您的 console.log() 看到待处理的承诺，因为该函数现已返回
4. 一段时间后，axios.get().then(...) 完成并解析它返回的承诺，因此 await 完成并将该 axios.get().then() 承诺的解析值分配给您的变量 test。 test 中的值是您在.then() 中的返回值的结果
5. 最后，记录test 的值，然后返回test 的值。
6. 该返回值成为已从 async 函数返回的 promise 的已解析值，然后该 promise 将使用该值解析。

如果您仔细查看您的两个console.log() 语句，您会发现这个console.log(this.fetchSomething()) 首先发生，因为这是函数命中await 的地方，然后立即返回待处理的promise。你的第二个 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;            
    },
}