isu-elements
Version:
Polymer components for building web apps.
188 lines (162 loc) • 5.31 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>isu-fetch demo</title>
<script type="text/javascript" src="../../utils/mock_setup.js"></script>
<script type="module">
import '../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader';
import '../../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-snippet.js';
import '../../isu-fetch';
import '../../isu-button';
if(!window.location.href.endsWith("?mock=mockData.js")) {
window.location.href = window.location.href + "?mock=mockData.js";
}
</script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.centered {
min-width: 800px;
}
demo-snippet {
--demo-snippet-code: {
max-height: 500px;
}
}
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic isu-fetch demo</h3>
<demo-snippet>
<template>
<div id="responseDiv"></div>
<isu-fetch id="fetchDemo" handle-response-as="json" response-body="{{responseBody}}"></isu-fetch>
<script>
fetchDemo.request = {
url: "/path/to/index.do",
method: "POST",
headers: {
"content-type": "application/json;charset=utf-8",
"Cache-Control": "no-cache"
}
};
fetchDemo.addEventListener("response-body-changed", (e) => {
responseDiv.innerHTML = JSON.stringify(e.detail.value);
});
</script>
</template>
</demo-snippet>
<h3>Basic isu-fetch demo</h3>
<demo-snippet>
<template>
<div id="responseDiv1"></div>
<isu-fetch id="fetchDemo1" handle-response-as="json"></isu-fetch>
<script>
fetchDemo1.request = {
url: "/path/to/index.do",
method: "POST",
headers: {
"Cache-Control": "no-cache"
}
};
fetchDemo1.addEventListener("response-body-changed", (e) => {
responseDiv1.innerHTML = JSON.stringify(e.detail.value);
});
</script>
</template>
</demo-snippet>
<h3>Basic isu-fetch demo</h3>
<demo-snippet>
<template>
<div id="responseDiv2"></div>
<isu-fetch id="fetchDemo2" handle-response-as="text"></isu-fetch>
<script>
fetchDemo2.request = {
url: "/path/to/index.do",
method: "POST",
headers: {
"test-header": "no-value"
}
};
fetchDemo2.addEventListener("response-body-changed", (e) => {
responseDiv2.innerHTML = JSON.stringify(e.detail.value);
});
</script>
</template>
</demo-snippet>
<h3>Basic isu-fetch demo</h3>
<demo-snippet>
<template>
<div id="responseDiv3"></div>
<div id="responseDiv3_1"></div>
<isu-fetch id="fetchDemo3" handle-response-as="text" loading></isu-fetch>
<script>
fetchDemo3.request = {
url: "/api/getStr",
method: "GET",
};
fetchDemo3.addEventListener("response-body-changed", (e) => {
responseDiv3_1.innerHTML = JSON.stringify(e.detail.value);
});
fetchDemo3.addEventListener("response-changed", (e) => {
const {type, status, statusText} = e.detail.value;
responseDiv3.innerHTML = `${type} ${status} ${statusText}`;
});
</script>
</template>
</demo-snippet>
<h3>Basic isu-fetch demo123</h3>
<demo-snippet>
<template>
<div id="responseDiv4_1"></div>
<div id="responseDiv4_1_err"></div>
<script type="module">
import { IsuFetch } from "../../isu-fetch.js";
const request = {
url: "/path/to/index.do",
method: "POST",
headers: {
"Cache-Control": "no-cache"
}
};
new IsuFetch().fetchIt(request)
.then(res => res.json())
.then(data => responseDiv4_1.innerHTML = JSON.stringify(data))
.catch(err => responseDiv4_1_err.innerHTML = err);
</script>
</template>
</demo-snippet>
<h3>Basic isu-fetch demo</h3>
<demo-snippet>
<template>
<div id="responseDiv4_2"></div>
<div id="responseDiv4_2_err"></div>
<isu-button id="btn">取消</isu-button>
<script type="module">
import {IsuFetch} from "../../isu-fetch.js";
const request = {
url: "/api/getStr"
};
const a = new IsuFetch();
a.fetchIt(request, {loading: true})
.then(res => res.text())
.then(data => responseDiv4_2.innerHTML = JSON.stringify(data))
.catch(err => responseDiv4_2_err.innerHTML = err);
setTimeout(() => {
a.abort();
}, 1000)
</script>
</template>
</demo-snippet>
</div>
</body>
</html>