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

Question

嗨，我使用带有聚合物 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>

Answer 1

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

演示

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);