Fetch API в JavaScript: упрощение HTTP-запросов

Fetch API — это современный JavaScript-интерфейс, упрощающий HTTP-запросы благодаря синтаксису, основанному на обещаниях, который делает код чище и удобнее в использовании. С помощью Fetch API вы можете запрашивать данные с сервера без необходимости перезагружать всю страницу, что делает приложение более быстрым и интерактивным. Вы можете легко отправлять запросы GET, POST, PUT или DELETE для взаимодействия с различными API. Fetch API также упрощает обработку различных типов данных и методов HTTP. Настройка заголовков запросов и управление различными типами контента становится проще, что позволяет без проблем работать с различными сервисами.

В этой статье вы узнаете, как использовать Fetch API, его преимущества для веб-приложений и использование прокси-серверов для обеспечения безопасной и эффективной обработки данных. Просмотрите этот список лучших прокси-провайдеров, чтобы понять, почему Bright Data — лучший выбор.

Разъяснение сути Fetch API

Fetch API используется для выполнения асинхронных HTTP-запросов путем отправки запроса на сервер и возврата обещания, которое после получения данных ответа будет выполнено. При разработке JavaScript использование Fetch API обеспечивает динамическое взаимодействие с серверами посредством HTTP-запросов (например, GET, POST, PUT), позволяя приложениям взаимодействовать с сервером без необходимости перезагрузки страницы. Ниже перечислены некоторые из преимуществ Fetch API:

Упрощенный синтаксис с обещаниями: Fetch API устраняет сложность использования обещаний в XMLHttpRequest, позволяя писать более чистый и читаемый код.
Поддерживаются различные форматы данных: можно использовать JSON, текстовые форматы и форматы blob, что упрощает анализ и работу с различными типами ответов.
Предоставляются объекты потоков и ответов: вы можете просматривать и изменять ответы с помощью читаемых потоков и настраивать подход к извлечению данных в соответствии с требованиями приложения.
Улучшенная обработка ошибок: Fetch по умолчанию не выдает ошибок в кодах состояния ошибок HTTP, но позволяет выполнять более четкие проверки ответов.
Менее сложные обратные вызовы: не нужно писать много обратных вызовов; вместо этого вы можете использовать .then(), .catch() или async/await, чтобы узнать, когда запросы завершены.

Теперь, когда вы изучили преимущества использования Fetch API, давайте рассмотрим его ключевые функции и возможности.

Асинхронные операции

Fetch API работает асинхронно, и обещание будет выполнено, как только станет доступен ответ сервера. Таким образом вы не блокируете пользовательский интерфейс для своих пользователей и обеспечиваете им удобный пользовательский интерфейс. Давайте рассмотрим несколько примеров.

Запрос GET

Вот пример использования Fetch API для отправки запроса GET:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log('Data fetched:', data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

В этом фрагменте API выборки получает сообщения от jsonplaceholder.typicode.com. Он проверяет правильность ответа с помощью response.ok и выдает ошибку, если нет. Затем он анализирует ответ на JSON с помощью response.json(). Все ошибки, вызванные сетевыми проблемами, неправильными ответами или ошибками синтаксического анализа, обрабатываются в блоке .catch().

POST-запрос

Вот как можно использовать Fetch API для отправки запроса POST:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  body: JSON.stringify({
    title: 'New Post',
    body: 'Hello World! This is a test.',
    userId: 1,
  }),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log('New Post created:', data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

Здесь Fetch API отправляет запрос на создание нового ресурса с помощью метода POST. Запрос POST похож на запрос GET, но содержит заголовки, информирующие сервер о том, что API отправляет данные JSON. Фактические данные JSON находятся в ключе body.

Интеграция с API-интерфейсами

Fetch API можно использовать для запросов к общедоступным или частным API, например для получения данных для диаграмм, панелей мониторинга или других функций, управляемых данными. Он позволяет веб-приложениям взаимодействовать с внешними сервисами, используя для обработки запросов и ответов процедуру, основанную на ответах.

Вот простой пример того, как можно получить данные о погоде из OpenWeatherMap API:

const city = "London,uk";
const apiKey = "YOUR_API_KEY";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`;

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then((weatherData) => {
    console.log("Weather data for London:", weatherData);
  })
  .catch((error) => {
    console.error("Error fetching weather data:", error);
  });

Замените YOUR_API_KEY своим фактическим ключом API.

Этот код извлекает данные о погоде в Лондоне с помощью API OpenWeather. Объект weatherData содержит такие сведения, как температура, влажность и условия, которые можно интегрировать в пользовательский интерфейс.

После запуска этого кода из терминала или оболочки (используя команду node filename.js) вы должны увидеть следующий результат:

Weather data for London: {
  coord: { lon: -0.1257, lat: 51.5085 },
  weather: [
    {
      id: 804,
      main: 'Clouds',
      description: 'overcast clouds',
      icon: '04d'
    }
  ],
  base: 'stations',
  main: {
    temp: 273.42,
    feels_like: 273.42,
    temp_min: 272.59,
    temp_max: 274.87,
    pressure: 1021,
    humidity: 87,
    sea_level: 1021,
    grnd_level: 1016
  },
  visibility: 10000,
  wind: { speed: 0.51, deg: 0 },
  clouds: { all: 99 },
  dt: 1736525048,
  sys: {
    type: 2,
    id: 268730,
    country: 'GB',
    sunrise: 1736496173,
    sunset: 1736525567
  },
  timezone: 0,
  id: 2643743,
  name: 'London',
  cod: 200
}

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

Обработка ошибок

По сравнению со старыми методами AJAX, такими как XMLHttpRequest, которые требовали настройки нескольких обработчиков событий для управления сетевыми ошибками, Fetch упрощает обработку ошибок, используя обещания и один блок .catch(). Fetch отклоняет обещание только в случае сетевой ошибки (например, когда нет подключения к Интернету). Он не выдает ошибок с кодами ошибок HTTP, такими как 404 или 500. Чтобы узнать, произошла ли одна из этих ошибок, вам необходимо вручную просмотреть response.ok. Если значением response.ok является false, это означает, что сервер ответил со статусом, не входящим в диапазон 200—299. В следующем примере показано, как Fetch обрабатывает ошибки при сбое запроса из-за неправильной конечной точки:

fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Failed to fetch. Status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log('This will not run if response is not ok');
  })
  .catch((error) => {
    console.error('Network or response error:', error.message);
  });

При запуске этого кода вы получаете выходное сообщение Ошибка сети или ответа: не удалось получить. Статус: 404. Код проверяет !response.ok и выдает ошибку из-за отсутствия конечной точки.

Использование прокси с Fetch API

Прокси могут расширить возможности Fetch API, предоставляя дополнительные возможности безопасности, масштабируемости и геолокации. Прокси-серверы служат посредниками между вашим клиентом и Интернетом, предоставляя уникальные IP-адреса, дополнительные уровни безопасности и более гибкий подход к извлечению ресурсов. Использование прокси-серверов с Fetch поможет предотвратить блокировку вашего IP-адреса, обеспечивая анонимность во время извлечения данных или веб-парсинга. Некоторые другие преимущества использования прокси включают следующее:

Повышенная безопасность: прокси маскируют ваш IP-адрес, что снижает риск злонамеренных атак на ваш IP-адрес.
Масштабируемость: прокси могут распределять запросы по нескольким IP-адресам, предотвращая ограничение скорости или блокировку.
Гибкость геолокации: прокси используются для отправки HTTP-запросов из разных мест, что удобно для доступа к контенту, доступному только в определенных регионах.

Типы прокси

Существуют разные типы прокси, каждый из которых предназначен для определенного варианта использования. Вот эти разные прокси:

Резидентные прокси: эти прокси используют реальные резидентные IP-адреса и пользуются большим доверием веб-сайтов, что делает их более дорогими, но и более эффективными в случае, если целевые веб-сайты блокируют трафик с IP-адресов центров обработки данных.
Ротируемые прокси: эти прокси автоматически меняют IP-адреса при каждом запросе или сеансе. Они идеально подходят для крупномасштабного извлечения данных, если вы хотите снизить риск превышения лимитов серверов или черных списков.
Прокси для центров обработки данных: эти прокси поступают из центров обработки данных; они экономичны и предлагают высокую скорость, но при частом использовании вас блокируют.

Прокси Bright Data с Fetch API

Bright Data предоставляет продвинутые прокси-сервисы, которые интегрируются с приложениями на основе Fetch. На выбор предлагаются резидентные прокси-серверы и прокси серверы центров обработки данных, масштабирование ваших возможностей извлечения данных для проектов корпоративного уровня и использование автоматической ротации IP-адресов для эффективного и надежного сбора данных.

Вот как интегрировать прокси-серверы Bright Data с Fetch API:

import fetch from "node-fetch";
import { HttpsProxyAgent } from "https-proxy-agent";

const proxyHost = "BRIGHT_DATA_PROXY_HOST:PORT";
const proxyUsername = "BRIGHT_DATA_USERNAME";
const proxyPassword = "BRIGHT_DATA_PASSWORD";
const proxyUrl = `http://${proxyUsername}:${proxyPassword}@${proxyHost}`;
const targetUrl = "https://jsonplaceholder.typicode.com/posts";

// Create a proxy agent
const agent = new HttpsProxyAgent(proxyUrl);

fetch(targetUrl, { agent })
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Error fetching data. Status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log("Data fetched via proxy:", data);
  })
  .catch((error) => {
    console.error("Proxy fetch error:", error);
  });

Этот код отправляет запрос через определенный прокси-сервер, используя fetch с помощью httpsProxyAgent. Затем он определяет данные прокси-сервера и создает прокси-агент. fetch также получает данные из целевого URL-адреса с помощью прокси-сервера.

Для настройки прокси-сервера необходимо использовать Fetch API из node-fetch. Дополнительные сведения см. в документации по node-fetch. Этот код может отличаться в зависимости от выбранного прокси-сервера. Для получения наиболее актуальной информации ознакомьтесь с официальной документацией Bright Data.

Рекомендации по использованию Fetch API

При выполнении запросов Fetch API следуйте следующим рекомендациям для повышения эффективности и производительности:

Кеширование ответов

Чтобы снизить нагрузку на серверы и улучшить пользовательский интерфейс в целом, можно использовать механизмы кеширования, в которых хранятся часто запрашиваемые данные, что позволяет избежать избыточных обращений к серверу. Вот пример, который проверяет, кешированы ли ваши данные до выполнения сетевого запроса:

const cache = new Map();
async function fetchWithCache(url) {
  if (cache.has(url)) {
    console.log("Fetching from cache:", url);
    return cache.get(url);
  }
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    cache.set(url, data);
    console.log("Fetched and cached:", url);
    return data;
  } catch (error) {
    console.error("Fetch error:", error);
    throw error;
  }
}

fetchWithCache("https://jsonplaceholder.typicode.com/posts")
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

Предотвращение ненужных запросов к уже кешированным данным может повысить производительность и сократить время загрузки.

Обработка таймаутов

Если вы установите время таймаутов, ваши запросы Fetch не будут обрабатываться бесконечно. Запросы, срок выполнения которых превышает указанную продолжительность, можно отменять с помощью команды AbortController. В следующем примере время ожидания равно трем секундам, а значение таймаута по умолчанию равно пяти секундам:

async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => {
    console.warn("Fetch request timed out:", url);
    controller.abort();
  }, timeout);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error("Fetch timeout or error:", error);
    throw error;
  }
}

fetchWithTimeout("https://jsonplaceholder.typicode.com/posts", 3000)
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

Это гарантирует, что запросы, которые выполняются дольше указанного времени таймаута, будут прерваны при надлежащей обработке других ошибок.

Регулирование частоты запросов

Чтобы предотвратить перегрузку API запросами, необходимо внедрить регулирование частоты (троттлинг) запросов. Таким образом, вам следует ограничить количество запросов, которые могут быть сделаны за определенный период времени. В следующем примере создается функция throttle , которая обеспечивает выполнение функции не чаще одного раза за каждый указанный интервал (limit):

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function () {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

const throttledFetch = throttle(async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log("Throttled fetch data:", data);
  } catch (error) {
    console.error("Throttled fetch error:", error);
  }
}, 2000);

throttledFetch("https://jsonplaceholder.typicode.com/posts");
console.log("Fetching again in 2 seconds...");
throttledFetch("https://jsonplaceholder.typicode.com/posts");

функция ThrottledFetch использует утилиту throttle для управления запросами API. Она обеспечивает интервал между повторными вызовами для получения данных из URL-адреса не менее двух секунд. Это предотвращает избыточные или чрезмерные вызовы API, позволяет обрабатывать ошибки и регистрировать полученные данные.

Заключение

Fetch API упрощает асинхронные операции и обработку данных в современных веб-приложениях. Однако при работе с крупномасштабными запросами или запросами с геотаргетингом могут возникнуть такие проблемы, как баны IP-адресов, ограничения скорости и отображение капч.

API-интерфейсы для парсинга и браузер Scraping Browser от Bright Data обеспечивают эффективные решения этих проблем. API-интерфейсы для парсинга обеспечивают беспрепятственное извлечение данных в обход мер по борьбе с парсингом, а браузер Scraping Browser эффективно обрабатывает динамический контент, насыщенный JavaScript. Эти инструменты обеспечивают безопасный, масштабируемый и надежный сбор данных даже для самых сложных веб-сайтов.

Начать использование бесплатной пробной версии

Начните бесплатно с помощью Google

Кредитная карта не требуется

Fetch API в JavaScript: все, что нужно знать