無法找到等待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。）