Як здійснити рендеринг сторінки очікування під час очікування завершення асинхронної задачі в Express JS

3 Березня 2024 в 00:37 109

Проблема з рендерингом сторінки очікування під час завершення асинхронної задачі в Express JS є досить поширеною серед розробників, які працюють з веб-додатками на базі Node.js. Однак, із впровадженням різних асинхронних операцій, які вимагають обробки на серверному боці, виникає проблема з належним відображенням сторінки для користувача під час очікування завершення цих операцій. У цій статті ми розглянемо детальніше як можна вирішити цю проблему, використовуючи Node.js, Express.js та асинхронний JavaScript.

Під час розробки веб-додатків, особливо тих, що використовують асинхронні запити на сервер, нерідко виникає ситуація, коли потрібно показати користувачу сторінку очікування під час завантаження даних або виконання певних дій на сервері. Це може бути корисно, наприклад, під час завантаження великих обсягів даних або виконання складних операцій обробки на сервері.

Одним із способів реалізації цієї функціональності є використання Express.js – популярного фреймворку для створення веб-додатків на базі Node.js. Під час розробки з допомогою Express.js, можна використовувати шаблонізатори, такі як Pug (раніше відомий як Jade), щоб генерувати HTML-сторінки на сервері.

Проте, для успішного відображення сторінки очікування під час асинхронних операцій, потрібно правильно організувати логіку у ваших маршрутах та контролерах. Давайте розглянемо крок за кроком, як це можна зробити.

// dataController.js
const asyncHandler = require("express-async-handler");
// Головний обробник для шляху "/" (домашня сторінка)
exports.index = asyncHandler(async (req, res, next) => {
  // Рендеримо початкове відображення з loading встановленим в true
  res.render("index", {
    title: "Завантаження даних",
    loading: true,
  });
  // Виконуємо асинхронну операцію
  const data = await doLongDataSyncing();
  // Після завершення операції рендеримо сторінку зі завантаженими даними
  res.render("index", {
    title: "Дані готові!",
    loading: false,
    data: data,
  });
});
// Функція, що виконує тривалу асинхронну операцію
const doLongDataSyncing = async () => {
  fetch('someEndpoint');
};

// dataController.js

const asyncHandler = require("express-async-handler");

// Головний обробник для шляху "/" (домашня сторінка)

exports.index = asyncHandler(async (req, res, next) => {

// Рендеримо початкове відображення з loading встановленим в true

res.render("index", {

title: "Завантаження даних",

loading: true,

});

// Виконуємо асинхронну операцію

const data = await doLongDataSyncing();

// Після завершення операції рендеримо сторінку зі завантаженими даними

res.render("index", {

title: "Дані готові!",

loading: false,

data: data,

});

// Функція, що виконує тривалу асинхронну операцію

const doLongDataSyncing = async () => {

fetch('someEndpoint');

};

В даному коді ми використовуємо express-async-handler для обробки асинхронних операцій в Express.js. Головний обробник index спершу рендерить сторінку з параметром loading встановленим в true, щоб показати користувачу, що дані завантажуються. Після завершення асинхронної операції, коли дані готові, сторінка рендериться знову з параметром loading встановленим в false, із завантаженими даними.

Цей підхід дозволяє забезпечити користувачеві зручне відображення сторінки під час очікування завершення асинхронних операцій на сервері. Важливо враховувати, що при цьому необхідно правильно налаштувати асинхронні операції та обробку помилок, щоб уникнути можливих проблем із роботою додатку.

У випадку, коли необхідно показати сторі