Question

当我取消注释下面fetchData中的“返回”时，我有以下代码。我如何设置它以便等待this.fetchData完成填充项目？我已经尝试了其他承诺的变体，async，等待，但无法让它实际工作......

到目前为止，我在this.items内设置fetchData，但我发现这绝对不是我想要的。它显示了我调用的第一行X行，因为它以这种方式设置，但是在fetchData调用之后应该发生的所有代码都是错误的，从尝试执行items.length开始。 / p>

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

Answer 1

更新回答：

道歉，在我下面的原始答案中，我完全错过了这个：

到目前为止，我在this.items内设置fetchData，但我发现它绝对不是我想要实际做的事情。

我的回答是想要this.items。对不起。

要在不使用fetchData的情况下从this.items获取信息，请使用来自then的承诺的axios.get处理程序返回新的承诺（请记住，{{1 }}和then返回promises）解析为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内使用catch。

原始回答：

您从<{1}}

返回承诺

getDataFromApi

...然后使用它而不是在axios.get中创建一个新的：

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 }; }); }）会创造新的承诺;如果您已经承诺合作，则then没有理由。有关该部分的更多信息：What is the explicit promise construction antipattern and how do I avoid it?

（请注意，由于某种原因，我假设你想要catch。如果你没有，你只想用new Promise作为返回this.items回调的值，并在response.data中使用。）

找不到等待vue.js异步功能的方法

1 个答案: