Polymer Starter Kit：如何使用后端 API？答案

【问题标题】：Polymer Starter Kit: how to work with the backend API?Polymer Starter Kit：如何使用后端 API？
【发布时间】：2015-09-13 23:47:32
【问题描述】：

我使用 Polymer Starter Kit 1.0.3。

我的应用程序有不同类型的页面。其中一些应该将从请求接收到的数据呈现给后端 API。

但是当应用程序启动时，所有页面的所有请求都会立即启动。

问题是如何用后端做正确的工作？

【问题讨论】：

标签： polymer backend polymer-1.0 polymer-starter-kit

【解决方案1】：

我和你有同样的问题，我找到的解决方案是在我的元素中使用方法来调用一个函数，当我真正需要它时它会向后端请求信息。对不起我的英语。

【讨论】：

我认为他在谈论观察者方法：polymer-project.org/1.0/docs/devguide/…

【解决方案2】：

有iron-ajax，这是与后端的主要元素聚合物工作。

这是我项目中的一个例子

  <iron-ajax auto
             verbose="true"
             url="[[apiCategories]]"
             handle-as="json"
             on-response="_onCategoriesLoadComplete"></iron-ajax>
  <iron-ajax auto
             id="ajaxWeapons"
             verbose="true"
             url="[[apiWeapons]]"
             params="[[apiWeaponsParams]]"
             debounce-duration="300"
             handle-as="json"
             last-response="{{page}}"></iron-ajax>
  <iron-ajax auto
             verbose="true"
             url="{{apiCountries}}"
             handle-as="json"
             last-response="{{countries}}"></iron-ajax>

这非常有用，当param改变或id改变时，整个页面的数据会重新加载，最简单的后端工作方式。

也许您不想自动请求，例如在我的代码中

<iron-ajax id="ajaxUserRegister"
           verbose="true"
           url="{{apiUsers}}"
           method="PUT"
           on-response="_onUserRegisterComplete"
           content-type="application/json"
           handle-as="json"></iron-ajax>
<iron-ajax id="ajaxUserLogin"
           verbose="true"
           url="{{apiUsers}}"
           method="POST"
           on-response="_onUserLoginComplete"
           content-type="application/json"
           handle-as="json"></iron-ajax>
<iron-ajax id="ajaxUserGet"
           verbose="true"
           url="{{apiUsers}}"
           method="GET"
           headers="[[user.headers]]"
           on-response="_onUserGetComplete"
           content-type="application/json"
           handle-as="json"></iron-ajax>

您也可以在需要时使用后端源

com._userLogin = function () {
    var {inputAccount:account,inputPassword:pwd} = this;
    if (!(account && account.length >= 4)) {
      this.showToast('Wrong account');
      return
    }
    if (!(pwd && pwd.length >= 4)) {
      this.showToast('Wrong password');
      return
    }

    this.$.ajaxUserLogin.body = {name: account, password: pwd};
    this.$.ajaxUserLogin.generateRequest();
  };

  com._onUserLoginComplete = function (e, ajax) {
    if (ajax.response.error) {
      this.showToast('Login faield:' + ajax.response.error);
      return
    }
    this.user = ajax.response;
  };

最后，将后端资源定义为iron-ajax，这就是聚合物与后端一起工作的方式。

【讨论】：