聚合物:如何将REST REST API基础URL存储在配置文件中

Question

我正在使用聚合物启动器套件。我必须在不同的html页面中进行许多API调用，对于每个API，我都在使用" Iron-ajax"'我要分配REST API URL。

url将就像" https://xxxxx.in/yy/yy/yy/yy"，这里的base url xxxxx对于所有API呼叫都相同，YY将会更改。因此，我如何将基础URL xxx存储在一个配置文件中并在所有" Iron-Ajax"的所有页面中访问该值？我应该在哪里访问基本URL，它是否在所有页面中都在聚合物的"就绪"功能中？

Answer 1

选项1

在聚合物中，您将值存储为属性。如果您将基本URL作为节点树顶部的属性(在第一个父元素中(，则可以将其传递到任何子元素(然后它们可以向下传递(。

您的顶级元素：

<link rel="import" href="./child-el.html">
<dom-module id="main-el">
    <template>
        <child-el base-url="[[baseUrl]]"></child-el>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'main-el',
        properties: {
            baseUrl: {
                type: String,
                value: 'https://XXXXX.in'
            }
        }
    });
</script>

孩子：

<dom-module id="child-el">
    <template>
        <iron-ajax url="[[baseUrl]]/YY/YY/YY"></iron-ajax>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'child-el',
        properties: {
            baseUrl: {
                type: String
            }
        }
     });
 </script>

选项2

您可以将所有AJAX调用放在一个不会在屏幕上渲染任何内容的元素中，并在您需要的任何地方都包含该元素。

<link rel="import" href="./api-handler.html">
<dom-module id="main-el">
    <template>
        <api-handler id="api-handler"></api-handler>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'main-el',
        attached () {
            this.$['api-handler'].makeRequest();
        }
    });
</script> 

选项3

将baseurl属性存储在聚合物行为中，并将其包含在您的元素中。

选项4

您可以将值连接到全球可访问的窗口对象。您的config.html看起来像：

<script>
    (function (Config) {
        Config.BASE_URL = 'https://XXXXX.in';
    })(window.Config = window.Config || {});
</script>

然后您将其导入index.html：

<link rel="import" href="./config.html">

..和config.base_url将在您的所有元素中可用。