Почему не выводиться console.error?

Question

[Дмитрий Ярощук]

Не могу понять почему при неудачном запросе не выводиться

console.error('It failed to get a response from the server, check the data', error)

;
Файл module.js:

export async function fulfillRequest (spanUrl, inputUrl) {
    const response = await fetch(`${spanUrl}/${inputUrl}`, {
        method: 'GET'
    });

   try {
       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);
}

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

Comments

[Алексей]

Ну так сам fetch, наверное, надо в try оборачивать

[Дмитрий Ярощук]

Алексей, не помогло

[Lapita12]

Дмитрий Ярощук, Чтобы исправить проблему, нужно добавить ключевое слово await перед вызовом fulfillRequest

[Дмитрий Ярощук]

Lapita12 не помогло

[Алексей]

Дмитрий Ярощук, ну в смысле не помогло? код можно измененный?

вот пример, 1й ваш неверный, 2й где ошибка ловится.



ну и плюс response в main.js будет undefined, т.к. fulfillRequest асинхронная функция, соответственно, и вызывать ее надо асинхронно как выше сказали