Сетевые запросы в JS - эффективные методы и инструменты

Расширенные примеры HTTP запросов

Пример 1: Параллельные запросы с Promise.all

const urls = ['https://api.example.com/users', 'https://api.example.com/posts', 'https://api.example.com/comments'];
const fetchAll = async () => {
  try {
    const promises = urls.map(url => fetch(url).then(res => res.json()));
    const results = await Promise.all(promises);
    console.log('Получены данные:', results);
  } catch (error) {
    console.error('Ошибка при загрузке:', error);
  }
};
fetchAll();

// Результат: массив из трёх объектов (users, posts, comments)

Пример 2: Отмена запроса с AbortController

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 3000); // отмена через 3 секунды

fetch('https://api.example.com/large-data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error('Ошибка:', error);
    }
  });

// Вывод: 'Запрос был отменён'

Пример 3: Прогресс загрузки через XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/bigfile');
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log(`Загружено ${percent.toFixed(1)}%`);
  }
};
xhr.onload = function() {
  console.log('Загрузка завершена');
};
xhr.send();

// Вывод: 'Загружено 23.5%', 'Загружено 57.2%', ..., 'Загрузка завершена'

Пример 4: Интерцепторы в axios

import axios from 'axios';

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  console.log('Запрос отправлен', config);
  return config;
}, error => Promise.reject(error));

axios.interceptors.response.use(response => {
  console.log('Ответ получен', response);
  return response;
}, error => {
  if (error.response.status === 401) {
    console.log('Перенаправление на страницу логина');
  }
  return Promise.reject(error);
});

axios.get('/api/profile');

// В консоли: 'Запрос отправлен' затем 'Ответ получен'

Пример 5: Таймаут запроса с axios

axios.get('https://api.example.com/slow', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('Таймаут запроса');
    } else {
      console.error('Ошибка:', error);
    }
  });

// Вывод: 'Таймаут запроса'

Пример 6: DELETE запрос с fetch

fetch('https://api.example.com/users/123', { method: 'DELETE' })
  .then(response => {
    if (response.status === 204) {
      console.log('Ресурс удалён');
    } else {
      return response.json();
    }
  })
  .then(data => console.log(data));

// Вывод: 'Ресурс удалён' или объект с подтверждением

Пример 7: Загрузка изображения как Blob

fetch('https://example.com/image.png')
  .then(response => response.blob())
  .then(blob => {
    const imgUrl = URL.createObjectURL(blob);
    document.getElementById('myImage').src = imgUrl;
  })
  .catch(error => console.error('Ошибка загрузки изображения:', error));

// Результат: изображение отображается на странице