Visual Studio 中的 Polymer 3.0 使用 Iron-ajax 进行休息调用答案

【问题标题】：Polymer 3.0 in visual studio to make rest call with iron-ajaxVisual Studio 中的 Polymer 3.0 使用 Iron-ajax 进行休息调用
【发布时间】：2018-11-17 18:25:50
【问题描述】：

您好，我使用带有聚合物 3.0 的 Visual Studio 2017。我尝试使用 Iron-ajax 来休息通话。但我出现错误“未捕获的 SyntaxError：意外字符串 Iron-ajax 第 11 行”。我在 Iron-ajax 网站上复制了相同的示例但错误是一样的。我错过了什么？

https://www.webcomponents.org/element/@polymer/iron-ajax

> <script src="node_modules/@polymer/iron-ajax/iron-ajax.js"></script>
>     <script type="module">
>         import { PolymerElement, html } from './node_modules/@polymer/polymer/polymer-element.js';
>         //import './node_modules/@polymer/iron-ajax/iron-ajax.js';
>         class SampleElement extends PolymerElement {
>             static get template() {
>                 return html`
>       <iron-ajax
>           auto
>           url="http://localhost:8033/api/City/All"   
>           hande-as="json"
>           on-response="handleResponse"
>           debounce-duration="300">
>       </iron-ajax>
>     `;
>             }
>         }
> 
>             customElements.define('sample-element', SampleElement);
>     </script>

【问题讨论】：

标签： ajax visual-studio polymer-3.x iron-ajax

【解决方案1】：

我试图从您的代码中找出答案，但我找不到。也许问题来自那里的其他东西。这是一个工作示例：（我只是更改了 URL 以检索一些数据：

DEMO

import {PolymerElement, html} from '@polymer/polymer';

import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/iron-list/iron-list.js';
import '@polymer/iron-image/iron-image.js';

class SampleElement extends PolymerElement {
            static get properties() { return { 
                  response: { type: Object }
             }
            }
             static get template() {
                 return html`
               <iron-ajax 
                 auto id="ajax"
                 url="https://randomuser.me/api?results=10"
                 last-response="{{response}}"
                  on-response="handleResponse"
              > </iron-ajax>

                 <iron-list items="[[response.results]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
                 <template>
                       <div class = "flexchild" style="width:50%"> 
                        <iron-image   style ="width: 40px;height:40px; border-radius:30px;" src='[[item.picture.large]]'></iron-image> 
                        <span>[[item.name.first]] [[item.name.last]]</span>  </div><br/>
                  </template>
                  </iron-list>


                  `;
             }

     handleResponse(r) {
       console.log(r)
     }
  }
 customElements.define('sample-element', SampleElement);

【讨论】：