VueJS Promise is failing

Question

我有一個產品組件和一個產品所有者組件。每一種產品都會有一個所有者

我試圖通過調用API端點做

我收到的產品列表。當承諾解決後，我有一個產品列表。每個產品都有一個OwnerID。我正在嘗試調用另一個API端點來獲取所有者的名稱並將其分配給正在迭代的當前產品。

到目前爲止我的代碼，我面臨

現在，每當我試圖做到這一點，我不斷收到以下錯誤

Uncaught TypeError: Cannot read property 'then' of undefined 
Uncaught (in promise) TypeError: Promise resolver undefined is not a function(…) 

<script> 
    var config = require('../config'); 
    export default { 
     data() { 
      return { 
       products: [], 
      } 
     }, 
     ready() { 
      this.getProducts().then(t => { 
       console.log(t); 
      }); 
     }, 
     methods : { 
      getProducts : function() { 
       let url = config.API.GetProduct 

       this.$http.get(url).then(response=> { 
        this.products = response.data.resource; 
        var p = this.products.map(this.getOwner); 
        return Promise.all(p); 

       }, error=> { 
        console.error("An error happened!") 
       }); 
      }, 
      getOwner : function(product) { 
       let url = config.API.GetProductOwnerName.replace('[$$$]', product.OwnerID); 
       var p = new Promise(); 

       this.$http.get(url).then(response => { 
        product.OwnerID = response.data.resource[0].OwnerName; 
        p.resolve(currentObj); 
       }); 

       return p; 

      } 
     } 
     components: {} 
    } 
</script> 

錯誤有人能讓我知道我在這裏做錯了嗎？

謝謝

Answer 1

您不必重新創建新的承諾對象。您可以將想要傳遞給下一個呼叫的對象返回。

getProducts: function() { 
    let url = config.API.GetProduct 

    return this.$http.get(url).then(response => { 
     this.products = response.data.resource; 
     return this.products.map(this.getOwner); 
    }, error=> { 
     console.error("An error happened!") 
    }); 
},