Как добавить экран загрузки перед рендерингом страницы в Node.js? - PullRequest
Новая
       19

Как добавить экран загрузки перед рендерингом страницы в Node.js?

0 голосов
/ 17 апреля 2019

На главной странице у меня есть форма.Действие POST выполняется после его заполнения.В обработчике POST я создаю дочерний процесс выполнения файла python с данными в форме.Дочерний процесс возвращает обещание, и после его возвращения я отображаю требуемую страницу.До отображения страницы браузер отображает анимацию загрузки рядом с полем URL (кнопка перезагрузки продолжает вращаться).Я разработал собственную анимацию загрузки, и пока страница не будет отрисована, я хочу, чтобы эта анимация работала на странице.Где в сценарии я должен добавить функцию для этого? 

index.post("/", function (request, response) {

    let my_url = "" + request.body.my_url + "";

    let py_program = spawn(pyInterpreter, ["run_algorithms/summarize_with_url.py", my_url]);

    py_program.stdout.on("data", data  => {

        console.log("Summary generated!");
        response.render("home.ejs", {summary: data.toString()});

    });
});

Edit (Little Clarity): запуск сценария python занимает около 15 секунд.Таким образом, страница не будет отображена, пока не закончится.Таким образом, js-файлы на стороне клиента не будут загружаться, поскольку они включены в страницу для визуализации.Я хочу отображать анимацию, пока сервер не ответит.

1 Ответ

0 голосов
/ 17 апреля 2019

Дело не в узле, а в браузере. Вы должны прикрепить свое вращающееся событие к обещанию или ответу в ожидании события POST.

Самое простое решение: вы отправляете POST через Ajax, показываете spinner и ждете ответа. Если ответ верен, EJS оставит вашу форму и покажет новую страницу. Если ответ недействителен, вы прячете свой счетчик.

Используйте что-то вроде этого: 

$('#form').submit(function(e){
    e.preventDefault()
    $.ajax({method:'POST',
        data:this.serialize(),
        success: function(data){
            if(!data){
                $('#spinner').hide();
                alert ('Your form is invalid!')
            }}})
})
...