Почему не выводиться console.error?
Не могу понять почему при неудачном запросе не выводиться
console.error('It failed to get a response from the server, check the data', error)
Файл module.js:
export async function fulfillRequest (spanUrl, inputUrl) {
try {
const response = await fetch(`${spanUrl}/${inputUrl}`, {
method: 'GET'
});
return {
status: 'success',
data: await response.json()
}
} catch (error) {
console.error('It failed to get a response from the server, check the data', error);
return {
status: 'error',
data: null
}
}
}
Файл main.js:
import { fulfillRequest } from "./module.js";
function mainFunc( options ) {
const { spanUrl, inputUrl, button, idBlock, controllerBlock, resultBlock, loader } = options;
button.addEventListener('click', async (event) => {
event.preventDefault();
const { fulfillRequest } = await import('./module.js');
const fixInputUrl = inputUrl.value.trim();
// console.log(typeof fixInputUrl, fixInputUrl);
const regExp = /^\/[a-z]*\/?\d*\/?$/;
const validateInput = regExp.test(fixInputUrl);
// console.log('inputUrl:', inputUrl);
// console.log('validateInput:', validateInput);
if (validateInput) {
loader.style.display = 'block';
const response = fulfillRequest(spanUrl.textContent, fixInputUrl);
// console.log('Response: ',response);
// console.log('Response-data: ', (await response).data);
// console.log('withoutTrim:', inputUrl.value, inputUrl.value.length);
// console.log('Trim:', inputUrl.value.trim(), inputUrl.value.trim().length);
if ((await response).status === 'success') {
loader.style.display = 'none';
const parseUrl = fixInputUrl.split('/');
// console.log('parseUrl:', parseUrl);
controllerBlock.style.display = 'block';
idBlock.style.display = 'block'
controllerBlock.innerHTML = parseUrl[1];
idBlock.innerHTML = parseUrl[2];
resultBlock.innerHTML = JSON.stringify((await response).data, null, 2);
console.log(fixInputUrl)
if (fixInputUrl === '/') {
controllerBlock.style.display = 'none';
idBlock.style.display = 'none'
}
}
else {
controllerBlock.style.display = 'none';
idBlock.style.display = 'none';
}
}
else {
console.error('Please check again the correctness of the data of the field');
}
})
}
try {
document.addEventListener('DOMContentLoaded', () => {
mainFunc({
spanUrl: document.querySelector('.js--url-span'),
inputUrl: document.querySelector('.js--url-input'),
button: document.querySelector('.js--button-request'),
idBlock: document.querySelector('.js--id-swapi'),
controllerBlock: document.querySelector('.js--controller-swapi'),
resultBlock: document.querySelector('.js--code'),
loader: document.querySelector('.js--loader'),
})
})
} catch (error) {
console.error(error);
}
body {
color: #c8c8c8;
background-color: #272b30;
margin: 0;
width: 100%;
min-height: 100vh;
}
.wrapper {
max-width: 1920px;
width: 100%;
margin: 0 auto;
}
.container {
max-width: 985px;
width: 100%;
margin: 0 auto;
}
.swapi {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
text-align: center;
background-color: transparent;
padding: 75px 0;
}
.swapi__title {
font-family: 'Montserrat',sans-serif;
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 120%;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
}
.swapi__form {
width: 100%;
box-sizing: border-box;
margin: 0 auto 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.swapi__url-span {
font-family: 'Montserrat',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 120%;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
max-width: 160px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 15px 0;
background-color: #484e55;
border: 1px solid rgba(0, 0, 0, 0.6);
border-radius: 10px 0 0 10px;
color: white;
}
.swapi__label {
max-width: 755px;
width: 100%;
}
.swapi__input {
width: 100%;
box-sizing: border-box;
padding: 15px 0 15px 12px;
font-family: 'Montserrat',sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 120%;
color: #272b30;
background-color: #ffffff;
border: 1px solid #cccccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.swapi__input::placeholder {
font-size: 12px;
}
.swapi__input:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 30px rgba(102, 175, 233, 0.6);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.swapi__button {
max-width: 72px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 14px 0;
border-color: rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
color: #ffffff;
background-color: #7a8288;
border-radius: 0 10px 10px 0;
}
.swapi__button:hover {
box-shadow: 0 0 20px 2px #4495de;
transition: background ease-in-out .15s, box-shadow ease-in-out .15s;
background-color: #4495DEFF;
}
.swapi-result {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 0;
background-color: #1c1e22;
border: 1px solid #0c0d0e;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.swapi-result__container {
font-family: 'Montserrat',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
max-width: 940px;
width: 100%;
margin: 0 auto;
display: block;
padding: 20px 0 20px 20px;
color: #3a3f44;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
overflow-y: scroll;
box-sizing: border-box;
}
.swapi-result__info {
max-width: 150px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.swapi-result__id,
.swapi-result__controller {
display: none;
box-sizing: border-box;
padding: 8px 0;
max-width: 50px;
width: 100%;
background-color: #8a9196;
border-radius: 10px;
}
.swapi-result__controller {
max-width: 85px;
}
.swapi-result__code {
text-align: left;
}
.loader {
display: none;
position: relative;
width: 54px;
height: 54px;
border-radius: 10px;
margin: 0 auto;
}
.loader div {
width: 8%;
height: 24%;
background: rgb(128, 128, 128);
position: absolute;
left: 50%;
top: 30%;
opacity: 0;
border-radius: 50px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
animation: fade458 1s linear infinite;
}
@keyframes fade458 {
from {
opacity: 1;
}
to {
opacity: 0.25;
}
}
.loader .bar1 {
transform: rotate(0deg) translate(0, -130%);
animation-delay: 0s;
}
.loader .bar2 {
transform: rotate(30deg) translate(0, -130%);
animation-delay: -1.1s;
}
.loader .bar3 {
transform: rotate(60deg) translate(0, -130%);
animation-delay: -1s;
}
.loader .bar4 {
transform: rotate(90deg) translate(0, -130%);
animation-delay: -0.9s;
}
.loader .bar5 {
transform: rotate(120deg) translate(0, -130%);
animation-delay: -0.8s;
}
.loader .bar6 {
transform: rotate(150deg) translate(0, -130%);
animation-delay: -0.7s;
}
.loader .bar7 {
transform: rotate(180deg) translate(0, -130%);
animation-delay: -0.6s;
}
.loader .bar8 {
transform: rotate(210deg) translate(0, -130%);
animation-delay: -0.5s;
}
.loader .bar9 {
transform: rotate(240deg) translate(0, -130%);
animation-delay: -0.4s;
}
.loader .bar10 {
transform: rotate(270deg) translate(0, -130%);
animation-delay: -0.3s;
}
.loader .bar11 {
transform: rotate(300deg) translate(0, -130%);
animation-delay: -0.2s;
}
.loader .bar12 {
transform: rotate(330deg) translate(0, -130%);
animation-delay: -0.1s;
}
<div class="wrapper">
<div class="container">
<div class="swapi">
<h1 class="swapi__title">SWAPI</h1>
<form class="swapi__form js--form" action="https://swapi.dev/api" method="get">
<span class="swapi__url-span js--url-span">https://swapi.dev/api</span>
<label class="swapi__label" for="url">
<input id="url" value="/planets/3/" class="swapi__input js--url-input" type="text" placeholder="/people/1/">
</label>
<button class="swapi__button js--button-request">Get info</button>
</form>
<div class="swapi-result">
<div class="swapi-result__container">
<div class="loader js--loader">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<div class="swapi-result__info">
<div class="swapi-result__id js--id-swapi"></div>
<div class="swapi-result__controller js--controller-swapi"></div>
</div>
<pre class="swapi-result__code js--code"></pre>
</div>
</div>
</div>
</div>
</div>