vue.js - VueJS Promise 失败了

Question

我有一个产品组件和一个产品所有者组件。每个产品都有一个所有者

我想要做什么

我通过调用 API 端点接收产品列表。承诺解决后，我有一个产品列表。每个产品都有一个 OwnerID。我正在尝试调用另一个 API 端点来获取所有者的名称并将其分配给当前正在迭代的产品。

到目前为止我的代码

<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>

我面临的错误

现在每当我尝试这样做时，我都会收到以下错误

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

有人可以让我知道我在这里做错了什么吗？

谢谢

Answer 1

您不必重新创建新的 Promise 对象。您可以只返回要传递给下一次调用的对象。

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!")
    });
},