Javascript 找不到等待vue.js异步函数的方法

当我在下面的

fetchData

中取消注释“return”时，我有以下代码可以工作。如何设置它，以便等待

this.fetchData

完成填充项目？我尝试过其他承诺的变体，异步，等待，但无法让它实际工作

到目前为止，我在

fetchData

中设置了

this.items

，但我意识到这绝对不是我真正想要做的。它向我显示了调用的前X行，因为这样设置，但是在

fetchData

调用之后应该发生的所有代码都出现了错误，从尝试执行

项开始。length

import axios from 'axios';

new Vue({
    el: '#app',
    data() {
        return {
            search: '',
            totalItems: 0,
            items: [],
            loading: true,
            pagination: {},
            headers: [ //some headers
            ],
            items: []
        }
    },
    watch: {
      pagination: {
        handler () {
          this.getDataFromApi()
            .then(data => {
              this.items = data.items
              this.totalItems = data.total
            })
        },
        deep: true
      }
    },
    mounted () {
      this.getDataFromApi()
        .then(data => {
          this.items = data.items
          this.totalItems = data.total
        })
    },
    methods: {
        fetchData() {
            axios.get('/api/v1/translations').then(response => {
                //console.log(response.data)
                this.items = response.data.data
            })

            //the return below is working 100%:
            //return [{id:1,key:1,lg:'en',text:'woopie'}];
        },

        getDataFromApi () {
            this.loading = true
            return new Promise((resolve, reject) => {
                const { sortBy, descending, page, rowsPerPage } = this.pagination

                let items = this.fetchData()
                const total = items.length

                //some code to setup pagination and sort

                setTimeout(() => {
                    this.loading = false
                    resolve({
                    items,
                    total
                    })
                    }, 1000)
            })
        }
    },
})

---

更新的答案：

抱歉，在我下面的原始回答中，我完全忽略了这一点：

到目前为止，我在

fetchData

中设置了

this.items

，但我意识到这绝对不是我真正想要做的

我的回答假设您确实想要

这个.items

。很抱歉

要仅从

fetchData

获取信息而不使用

this.items

，请使用

axios的承诺上的
then
处理程序。get

返回一个新承诺（请记住，

then

和

catch

返回承诺），该承诺通过

response.data.data

解析：

fetchData() {
//  vvvvvv------------------------
    return axios.get('/api/v1/translations').then(response => {
        return response.data.data;
//      ^^^^^^^^^^^^^^^^^^^^^^^^^
    })
},

这可以写得更简洁：

fetchData() {
    return axios.get('/api/v1/translations').then(response => response.data.data);
},

然后，在

getDataFromApi

中，对该承诺使用

Then

处理程序：

getDataFromApi () {
    this.loading = true
    return this.fetchData().then(items => {
        // You might use this at some stage: const { sortBy, descending, page, rowsPerPage } = this.pagination
        this.loading = false;
        return { items, total: items.length };
    });
}

请注意，

getDataFromApi

的使用者处理承诺拒绝（例如，在其上使用

catch

处理程序）非常重要。如果您不希望消费者这样做，请不要返回承诺，而是使用

getDataFromApi

中的

catch

---

原始答案：

您从axios返回承诺。获取：

fetchData() {
//  vvvvvv------------------------
    return axios.get('/api/v1/translations').then(response => {
        //console.log(response.data)
        this.items = response.data.data
    })
},

…然后使用它，而不是在

getFromApi

中创建一个新的：

getDataFromApi () {
    this.loading = true
    return this.fetchData().then(() => {
        // You might use this at some stage: const { sortBy, descending, page, rowsPerPage } = this.pagination
        this.loading = false;
        return { items: this.items, total: this.items.length };
    });
}

记住

然后

（和

捕获

）创造新的承诺；如果你已经有了一个可以合作的承诺，就没有理由做出新的承诺。关于这方面的更多信息：

---

（注意，我假设您出于某种原因想要实例上的

this.items

。如果不想要，您只想使用

response.data

作为

axios.get…的返回值，然后
回调并在
getDataFromApi
中使用它）
好了，得到了原理并让它工作了！万分感谢@晚上：很高兴这有帮助！我再次看了你的问题，意识到我漏掉了一个非常重要的句子，所以我更新了上面的答案。嗯。当做