关于Polymer 1.0,使用iron-ajax制作数据服务器的问题

时间:2018-08-31 09:53:49

标签: polymer-1.0 iron-ajax

我有一个使用Polymer 1.2的项目,并且正在尝试使用名为 review_data_service.html 的Iron-ajax创建数据服务器组件,该组件可以进行AJAX调用以发送(GET,POST,PUT或删除)这样的后端请求:

target_path

在我的另一个组件 my-project-reviewer.html 中,我可以像这样成功获取评论数据:

<dom-module id="review-data-service">
        <template>
                <iron-ajax url= "[[URI]]"
                id="GET_REVIEWS"
                handle-as="json" 
                loading="{{loading}}" 
                on-response="handleResponse"
                content-type="application/json"
                auto></iron-ajax>
        </template>
        <script>
            Polymer({
                is: 'review-data-service',
                properties: {
                    reviewId : Number,
                    API: {
                        type: Object,
                        value:  () => {
                            return {
                                BASE : 'http://localhost:3000',
                                RESOURCE : 'reviews'
                            };
                        }
                    },
                    URI : {
                        type : String,
                        computed : 'setURI(API.BASE, API.RESOURCE)'
                    }
                },
                setURI : (BASE, RESOURCE) => {
                    return `${BASE}/${RESOURCE}`;
                },
                handleResponse : function (event) {
                    let promise = new Promise ((resolve, reject) => {
                        if (event.detail.response != null) {
                            resolve(event.detail.response);
                        } else {
                            reject('error');
                        }
                    });
                    promise.then(result => {
                        this.fire('getReviews', 
                            {reviews : result}
                        )
                    }, result => {
                        console.log('reject', result);
                    })
                }
            });
        </script>
    </dom-module>

但是,当我尝试在dom中显示这些数据时,它将无法正常工作:

 listeners: {
                    'getReviews': '_getReviews',
            },

_getReviews: (event) => {
                this.reviews = event.detail.reviews;
                // can get the data successfully at here:
                console.log(this.reviews);
            },

有人知道会发生什么吗?一开始,我没有使用Promise,我认为可能是因为asyc问题(呈现dom时,仍然无法显示数据),所以我使用了Promise,但仍然得到了相同的结果(只能从中获取数据)。控制台),再加上创建数据服务的更好方法(或示例) 在聚合物1中? (我曾经使用Angular可以完美地实现这一目标)只是想创建一个可以支持在其他组件中使用的基本http请求(GET,POST,PUT,DELETE)的组件?或将数据服务视为一种行为(我曾尝试过,但效果不佳) 非常感谢您!

1 个答案:

答案 0 :(得分:0)

聚合物需要知道有很多东西可以尝试打电话

_getReviews: (event) => {
            this.set('reviews', event.detail.reviews);
            // can get the data successfully at here:
            console.log(this.reviews);
        }