История страницы
...
HTML |
---|
<script> "use strict"; const DEFAULT_HOST = "httphttps://localhost:8080suggestions.dadata.ru:443"; function stringify(obj) { let objStr = JSON.stringify(obj, null, 4); if (objStr == "{}") { objStr = obj.toString(); } return objStr; } function show(el) { el.style.display = ""; } function hide(el) { el.style.display = "none"; } class ApiTester { constructor(selector, httpMethod, apiMethod, body) { this.state = { host: localStorage.getItem("apitester.hostname") || DEFAULT_HOST, httpMethod: httpMethod, apiMethod: apiMethod, body: body, isExecuting: false, output: null, }; this.el = this.initEl(selector); this.ui = this.initUi(this.el); this.listen(); this.render(); } get isMixedContent() { return ( location.protocol == "https:" && this.state.host.startsWith("http:") ); } initEl(selector) { const el = document.querySelector(selector); el.innerHTML = ` <div class="apitester-editor"> <h3> API-тестер <a data-ref="enable-http" class="apitester-link" href="#" title="Если вы открыли Confluence через HTTPS, запросы к HTTP-серверам подсказок работать не будут. Переключайтесь на HTTP, чтобы заработали">включить HTTP</a> <a data-ref="enable-https" class="apitester-link" href="#">включить HTTPS</a> </h3> <div> <pre data-ref="method"></pre> <input data-ref="host"> <pre data-ref="url"></pre> </div> <div> <textarea data-ref="body"></textarea> </div> <div> <button data-ref="execute">Выполнить</button> <a data-ref="clear" class="apitester-link" href="#">очистить</a> </div> </div> <pre data-ref="output"> </pre> `; return el; } initUi(el) { return { enableHttp: el.querySelector("[data-ref=enable-http]"), enableHttps: el.querySelector("[data-ref=enable-https]"), method: el.querySelector("[data-ref=method]"), host: el.querySelector("[data-ref=host]"), url: el.querySelector("[data-ref=url]"), body: el.querySelector("[data-ref=body]"), execute: el.querySelector("[data-ref=execute]"), clear: el.querySelector("[data-ref=clear]"), output: this.el.querySelector("[data-ref=output]"), }; } listen() { this.el.addEventListener("keydown", (event) => { this.onKeydown(event); }); this.ui.enableHttp.addEventListener("click", (event) => { this.onSwitchProtocol("http:", event); }); this.ui.enableHttps.addEventListener("click", (event) => { this.onSwitchProtocol("https:", event); }); this.ui.host.addEventListener("change", (event) => { this.onEdit(event); }); this.ui.body.addEventListener("change", (event) => { this.onEdit(event); }); this.ui.execute.addEventListener("click", (event) => { this.onExecute(event); }); this.ui.clear.addEventListener("click", (event) => { this.onClear(event); }); } onKeydown(event) { if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) { // Ctrl + Enter event.preventDefault(); this.onEdit(); this.onExecute(); } } onSwitchProtocol(protocol, event) { event.preventDefault(); window.location.protocol = protocol; } onEdit() { this.state.host = this.ui.host.value; this.state.body = this.ui.body.value; localStorage.setItem("apitester.hostname", this.state.host); this.render(); } onExecute() { this.markAsExecuting(); this.execute() .then((response) => { return response.json(); }) .then((response) => { this.showResponse(response); }) .catch((err) => { this.showResponse(err); }); } onClear(event) { event.preventDefault(); this.state.output = null; this.render(); } markAsExecuting() { this.state.output = null; this.state.isExecuting = true; this.render(); } showResponse(response) { this.state.output = stringify(response); this.state.isExecuting = false; this.render(); } execute() { const url = this.state.host + this.state.apiMethod; const options = { method: this.state.httpMethod, mode: "cors", headers: { "Content-Type": "application/json", Authorization: "Token 7fd18aaabd7d53ffa4846e4521c1f736c13490eb", }, }; if (this.state.httpMethod == "POST") { options.body = this.state.body; } return fetch(url, options); } render() { if (this.isMixedContent) { show(this.ui.enableHttp); } else { hide(this.ui.enableHttp); } if (location.protocol == "http:") { show(this.ui.enableHttps); } else { hide(this.ui.enableHttps); } this.ui.method.innerHTML = this.state.httpMethod; this.ui.host.value = this.state.host; this.ui.url.innerHTML = this.state.apiMethod; this.ui.body.value = this.state.body; if (this.state.isExecuting) { this.ui.execute.setAttribute("disabled", "disabled"); } else { this.ui.execute.removeAttribute("disabled"); } this.ui.output.innerHTML = this.state.output; if (this.state.output) { show(this.ui.output); show(this.ui.clear); } else { hide(this.ui.output); hide(this.ui.clear); } } } </script> |
Обзор
Инструменты контента