Пользовательский ввод и загрузка контента в JavaScript

Раздел: JavaScript -> ввод-вывод в JavaScript

Чтение данных в JavaScript

Основной метод: fetch для чтения данных с сервера

Современный способ получения данных с удаленного сервера - использовать функцию fetch. Она возвращает Promise, который разрешается в объект Response. Данные можно прочитать в разных форматах: JSON, текст, Blob, ArrayBuffer.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    const json = await response.json();
    console.log(json);
  } catch (err) {
    console.error('Ошибка при загрузке:', err);
  }
}
fetchData('https://jsonplaceholder.typicode.com/posts/1');

Js read (чтение данных в javascript)

{
  "userId": 1,
  "id": 1,
  "title": "...",
  "body": "..."
}

Типичные проблемы:

  • CORS - если сервер не разрешает кросс-доменные запросы, fetch блокируется. Решение: настроить серверные заголовки или использовать прокси.
  • Ошибка сети - отсутствие интернета. Обрабатывается блоком catch.
  • Неверный формат ответа - если response.json() не может распарсить JSON, выбрасывается исключение. Проверяйте Content-Type.

Как получить ввод пользователя с клавиатуры?

Функция prompt() отображает диалоговое окно с полем ввода. Возвращает строку или null при отмене.

const userInput = prompt('Введите ваше имя:');
if (userInput !== null) {
  console.log('Привет, ' + userInput);
} else {
  console.log('Ввод отменен');
}

Проблемы:

  • prompt блокирует выполнение скрипта до ответа пользователя.
  • Возвращает строку, даже при вводе чисел - требуется преобразование.
  • Отсутствие возможности стилизации окна.

Как извлечь данные из HTML-формы?

Для чтения данных из полей формы используется свойство value или объект FormData.

<form id='myForm'>
  <input type='text' name='username' id='username' />
  <input type='email' name='email' id='email' />
  <button type='submit'>Отправить</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  console.log(username, email);
});
</script>

Ошибки:

  • Забыли вызвать preventDefault() - страница перезагружается.
  • Обращение к элементу до его загрузки - помещайте скрипт в конце body или используйте DOMContentLoaded.

Как загрузить файл с компьютера пользователя?

Используется элемент <input type='file'> и объект FileReader для чтения содержимого.

<input type='file' id='fileInput' />
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(event) {
    console.log('Содержимое файла:', event.target.result);
  };
  reader.readAsText(file);
});
</script>

Проблемы:

  • Большие файлы могут замедлить работу - используйте readAsArrayBuffer для бинарных данных.
  • Необходимость проверки типа файла (file.type).
  • FileReader работает асинхронно, обработка в onload.

Как прочитать файл в среде Node.js?

В Node.js для чтения файлов используется модуль fs. Асинхронная версия readFile не блокирует цикл событий.

const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Ошибка чтения файла:', err);
    return;
  }
  console.log('Данные из файла:', data);
});
Данные из файла: содержимое файла...

Ошибки:

  • Файл не найден - err.code === 'ENOENT'. Обрабатывается в колбэке.
  • Кодировка не указана - возвращается Buffer. Явно задавайте 'utf8' или другую.
  • Синхронная версия readFileSync блокирует процесс, не рекомендуется для больших файлов.

Как выполнить запрос к серверу без fetch?

XMLHttpRequest - классический способ AJAX. Используется реже, но может потребоваться для поддержки старых браузеров.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Ошибка:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('Сетевая ошибка');
};
xhr.send();

Недостатки:

  • Громоздкий API, много колбэков.
  • Отсутствие встроенной поддержки Promise.
  • Требуется вручную устанавливать заголовки для JSON.

Потоковое чтение данных с сервера с отслеживанием прогресса

Для больших файлов удобно читать данные по кускам, используя свойство body у Response и ReadableStream.

Пример 
async function streamFetch(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let total = 0;
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    total += value.length;
    console.log('Получено байт:', total);
    const chunk = decoder.decode(value, { stream: true });
    // Обработка chunk
  }
  console.log('Загрузка завершена');
}
streamFetch('https://example.com/largefile.json');

Результат:

Получено байт: 1024
Получено байт: 2048
...
Загрузка завершена

Чтение изображения и создание превью

Используется FileReader.readAsDataURL для превращения файла в base64 строку, которую можно подставить в src тега img.

Пример 
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('image/')) return;
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
});

Результат:

На странице появляется изображение.

Построчное чтение файла в Node.js с использованием readline

Модуль readline позволяет обрабатывать файл построчно, экономя память.

Пример 
const readline = require('readline');
const fs = require('fs');

const rl = readline.createInterface({
  input: fs.createReadStream('largefile.txt'),
  output: process.stdout,
  terminal: false
});

rl.on('line', (line) => {
  console.log('Строка:', line);
});

rl.on('close', () => {
  console.log('Файл прочитан полностью');
});

Результат:

Строка: первая строка
Строка: вторая строка
...
Файл прочитан полностью

Чтение всех JSON файлов из директории в Node.js

Комбинируется fs.readdir и fs.readFile (асинхронно через Promise.all).

Пример 
const fs = require('fs').promises;
const path = require('path');

async function readAllJSON(dirPath) {
  try {
    const files = await fs.readdir(dirPath);
    const jsonFiles = files.filter(f => f.endsWith('.json'));
    const contents = await Promise.all(
      jsonFiles.map(async (file) => {
        const filePath = path.join(dirPath, file);
        const data = await fs.readFile(filePath, 'utf8');
        return { filename: file, data: JSON.parse(data) };
      })
    );
    console.log(contents);
  } catch (err) {
    console.error('Ошибка:', err);
  }
}
readAllJSON('./data');

Результат:

[
  { filename: 'config.json', data: { ... } },
  ...
]

чтение данных в JavaScript - comments

En
Js read (javascript)