Question

我怀疑我离开这里，但基本上我是在尝试检索门票列表，然后是每张门票的详细信息。我有第一部分工作，但当我尝试添加＆＃34;递归＆＃34;它只是失败了。

这是仅列出ID的工作代码：

<template is="dom-bind" id="app">

    <iron-ajax auto
               url="https://<mydomain>.freshdesk.com/api/v2/tickets"
               headers='{ "user": "<apikey>", "pass": "X", "sendImmediately": "true" }'
               handle-as="json"
               method="GET"
               last-response="{{ticketList}}"
               with-credentials></iron-ajax>

    <template is="dom-repeat" items="[[ticketList]]">
        <div class="ticket">{{item.id}}</div>
    </template>

</template>

我尝试了一些内容，包括该模板中的新iron-ajax和template，其中包含不同的网址（"/tickets/" + {{item.id}}），但我不认为这甚至是接近正确的方法。我在DOM中获得的只是一个具有#document-fragment

的模板元素

那么如何获取/ tickets / 20，/ tickets / 21等的详细信息？

Answer 1

可以在iron-ajax模板中使用dom-repeat以声明方式执行请求（如您所述）。

下面的示例检索包含单词polymer的书籍列表，然后检索每本书籍的链接。

<!doctype html>
<html>

<head>
  <meta name="description" content="https://stackoverflow.com/questions/37817472">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-ajax/iron-ajax.html" rel="import">
</head>

<body>
  <dom-module id="my-el">
    <template>
      <!-- get list of book titles that include the word "polymer" -->
      <iron-ajax id="ajax"
                 url="https://www.googleapis.com/books/v1/volumes?q=polymer"
                 handle-as="json"
                 last-response="{{response}}" auto></iron-ajax>
      <template is="dom-repeat" items="[[response.items]]">
        <!-- get links to the list of books from previous iron-ajax --> 
        <iron-ajax id="ajax"
                   url="{{url(item.id)}}"
                   handle-as="json"
                   on-response="onResponse"
                   auto></iron-ajax>        
      </template>
    </template>
    <script>
      Polymer({
        is: 'my-el',
        properties: {
          response: {
            type: String,
            notify: true
          }
        },
        onResponse: function(e) {
          var p = document.createElement('p');
          p.textContent = e.target.lastResponse.selfLink;
          Polymer.dom(this.root).appendChild(p);
        },
        url: function(id) {
          return "https://www.googleapis.com/books/v1/volumes/" + id;
        }
      });
    </script>
  </dom-module>
  <my-el></my-el>
</body>

</html>

这是一个JS Bin到同一个例子。如果你试图运行太多，你可能会得到403s ......

http://jsbin.com/jijehus/5/edit?html,output

<强>更新

a1626询问您是否可以使用一个iron-ajax元素来处理所有请求。这也是可能的。

<!doctype html>
<html>
<head>
  <meta name="description" content="https://stackoverflow.com/questions/37817472">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-ajax/iron-ajax.html" rel="import">
</head>
<body>
  <dom-module id="my-el">
    <template>
      <iron-ajax id="ajax"
                 url="https://www.googleapis.com/books/v1/volumes?q=polymer"
                 handle-as="json"
                 on-response="onResponse"
                 last-response="{{response}}" auto></iron-ajax>
    </template>
    <script>
      Polymer({
        is: 'my-el',
        properties: {
          response: {
            type: Object,
            notify: true
          },
          queue: {
            type: Array,
            notify: true,
            value: function() { return []; }
          }
        },
        onResponse: function(e) {
          var ajax = this.$.ajax;
          var originalUrl = 'https://www.googleapis.com/books/v1/volumes?q=polymer';
          var url = ajax.lastRequest.xhr.responseURL;
          if (url.includes(originalUrl)) {
            console.log('this is the first request');
            for (var i = 0; i < ajax.lastResponse.items.length; i++) {
              this.push('queue', ajax.lastResponse.items[i].id);
            }
            ajax.url = this.url(this.pop('queue'));
          } else {
            console.log(ajax.lastResponse.selfLink);
            ajax.url = this.url(this.pop('queue'));
          }
        },
        url: function(id) {
          return "https://www.googleapis.com/books/v1/volumes/" + id;
        }
      });
    </script>
  </dom-module>
  <my-el></my-el>
</body>
</html>

https://jsbin.com/beyawe/edit?html,console

使用iron-ajax进行递归调用？

1 个答案: