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

Question

我在下面的fetchData中取消注释“返回”时有以下代码。我如何设置它，所以我等待this.fetchData完成填充项目？我曾尝试过其他的承诺，异步，待机的变种，但不能让它真正工作...

到目前为止，我设置了this.items内fetchData但我意识到这绝对不是我想真正做了什么。它向我展示了我的通话的前X行，因为这样设置，但所有在fetchData通话之后发生的代码都是窃听，从尝试执行items.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) 
      }) 
     } 
    }, 
}) 

Answer 1

更新答案：

道歉，在我原来的答复下面我完全错过了这一点：

到目前为止，我设置了this.items内fetchData但我意识到这绝对不是我想要真正做到。

我的回答假设你做想this.items。对于那个很抱歉。

只得到从fetchData的信息，而无需使用this.items，使用then处理程序上的承诺从axios.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.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（和catch）创造新的承诺;没有理由new Promise如果你已经有承诺与合作。更多关于该部分：What is the explicit promise construction antipattern and how do I avoid it?

（请注意，我假设你想this.items的实例由于某种原因，如果你没有，你只是想用response.data为您axios.get...then回调的返回值，使用它在getDataFromApi。）