聚合物铁-ajax 不工作
Polymer iron-ajax not working
我正在测试 Polymer 的 iron-ajax 调用。为此,我设置了一个虚拟视图:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<style include="shared-styles iron-flex iron-flex-alignment">
.circle {
display: inline-block;
text-align:center;
color: black;
border-radius: 70%;
background: #ddd;
font-size: 30px;
width: 110px;
height: 110px;
margin: 15px;
}
</style>
<iron-ajax id="ajax"
auto
url="https://jsonplaceholder.typicode.com/posts/1"
last-response="{{data}}"
on-response="_onResponse"
handleAs="json">
</iron-ajax>
<div class="circle">{{data.id}}</div>
</template>
<script>
class MyVoltage extends Polymer.Element {
static get is() {
return "my-voltage";
}
_onResponse() {
setTimeout(() => this.$.ajax.generateRequest(), 500);
}
}
customElements.define(MyVoltage.is, MyVoltage);
</script>
</dom-module>
但是,这不起作用。我想每半秒 ping API,但它甚至没有加载一次:我只是得到一个空圆圈。
我在这里错过了什么?为什么 API 调用不起作用?谢谢!
首先想到的是您忘记导入它了吗?根据您共享的代码,您仅导入 polymer-element、shared-style 和 iron-flex-layout-类。
接下来我看到的是 handleAs 参数必须写成 handle-as 因为 html 不关心驼峰案例
我正在测试 Polymer 的 iron-ajax 调用。为此,我设置了一个虚拟视图:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<style include="shared-styles iron-flex iron-flex-alignment">
.circle {
display: inline-block;
text-align:center;
color: black;
border-radius: 70%;
background: #ddd;
font-size: 30px;
width: 110px;
height: 110px;
margin: 15px;
}
</style>
<iron-ajax id="ajax"
auto
url="https://jsonplaceholder.typicode.com/posts/1"
last-response="{{data}}"
on-response="_onResponse"
handleAs="json">
</iron-ajax>
<div class="circle">{{data.id}}</div>
</template>
<script>
class MyVoltage extends Polymer.Element {
static get is() {
return "my-voltage";
}
_onResponse() {
setTimeout(() => this.$.ajax.generateRequest(), 500);
}
}
customElements.define(MyVoltage.is, MyVoltage);
</script>
</dom-module>
但是,这不起作用。我想每半秒 ping API,但它甚至没有加载一次:我只是得到一个空圆圈。
我在这里错过了什么?为什么 API 调用不起作用?谢谢!
首先想到的是您忘记导入它了吗?根据您共享的代码,您仅导入 polymer-element、shared-style 和 iron-flex-layout-类。 接下来我看到的是 handleAs 参数必须写成 handle-as 因为 html 不关心驼峰案例