Как делать HTTP-запросы в Node.js с помощью Fetch API

Fetch API — один из наиболее часто используемых способов делать HTTP-запросы в JavaScript. Он позволяет вам просто и эффективно отправлять и получать данные с серверов. Хотя он использовался в браузерных приложениях, недавние обновления Node.js ввели экспериментальную поддержку Fetch API, чтобы вы могли писать серверный код, не полагаясь на сторонние библиотеки.

В этом посте будет показано, как использовать Fetch API в Node.js для выполнения HTTP-запросов. Если вам нужно выполнить запросы GET или POST, обработать заголовки или сравнить Fetch API с Axios, этот пост поможет вам начать работу.

Давайте углубимся в это!

Зачем использовать Fetch API для HTTP-запросов?
Настройка Fetch API в Node.js
Выполнение запросов GET с помощью Fetch API
Обработка заголовков ответа в Fetch API
Отправка POST-запросов с помощью Fetch API
Обработка ошибок в Fetch API
Fetch API против Axios: основные различия
Заключение
FAQ

Зачем использовать Fetch API для HTTP-запросов?

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

На рисунке показаны причины использования Fetch API для HTTP-запросов

Вот несколько причин, по которым разработчикам нравится Fetch API:

Встроенная поддержка в современном JavaScript
Fetch API поддерживается во всех браузерах, и поскольку Node.js 17.5, он также поддерживается в серверном JavaScript. Нет необходимости в сторонних библиотеках, таких как Axios или node-fetch.
Подход, основанный на обещаниях
В отличие от старых методов, таких как XMLHttpRequest, Fetch API использует обещания, чтобы вы могли избежать ада обратных вызовов и написать более читаемый асинхронный код.
Гибкость и настраиваемость
Fetch API поддерживает все распространенные методы HTTP (GET, POST, PUT, DELETE) и позволяет добавлять пользовательские заголовки, легко обрабатывать данные JSON и управлять различными типами запросов и ответов.
Легкое решение
Поскольку API Fetch встроен в современные среды JavaScript, вам не нужно устанавливать дополнительные библиотеки, что снижает зависимости вашего проекта и повышает эффективность.

Настройка Fetch API в Node.js

Прежде чем использовать Fetch API в Node.js, вам необходимо правильно настроить среду. Fetch API изначально доступен в Node.js 17.5 и выше, но в некоторых версиях все еще является экспериментальным. Давайте рассмотрим процесс настройки.

Шаг 1: Проверьте версию Node.js

Чтобы использовать Fetch API без установки дополнительных библиотек, вам нужен Node.js 17.5 или выше. Выполните следующую команду в терминале, чтобы проверить версию Node.js:

узел -v

Если ваша версия ниже 17.5, загрузите последнюю версию с сайта Официальном сайте.

Шаг 2: Включите экспериментальный API Fetch (необязательно)

Если вы используете версию 17.5 или выше, но все еще считаете Fetch API экспериментальным, вам может потребоваться включить его. Использовать --experimental-fetch при запуске вашего кода:

1	узел --experimental-fetch your_code.js

Шаг 3: Создайте проект Node.js

Если вы начинаете с нуля, создайте новый проект Node.js. Используйте следующие команды для инициализации вашего проекта и создания файла для вашего кода:

MkDir fetch-api-demo
cd fetch-api-demo
инициализация npm -y
трогать app.js

Шаг 4: Используйте Fetch API

Теперь вы можете писать код Fetch API непосредственно в файле app.js. Например, базовый запрос GET выглядит так:

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => ответ.JSON())
  .тогда((данным) => {
    консоль.журнал(данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Использование сторонней библиотеки (необязательно)

Если вы работаете со старой версией Node.js или предпочитаете не обновляться, вы все равно можете использовать Fetch API, установив библиотеку node-fetch. Установите ее с помощью:

1	npm install node-fetch

Затем импортируйте и используйте его в своем коде следующим образом:

Const получить = требовать('node-fetch');

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => ответ.JSON())
  .тогда((данным) => {
    консоль.журнал(данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Настройка Fetch API в Node.js проста. После этого вы можете начать делать HTTP-запросы. В следующем разделе мы рассмотрим, как использовать Fetch API для GET-запросов.

Выполнение запросов GET с помощью Fetch API

Запросы GET являются наиболее распространенным типом HTTP-запросов, используемых для извлечения данных с сервера. С Fetch API в Node.js делать запросы GET легко. Давайте посмотрим, как делать запросы GET и обрабатывать ответы.

Пример простого запроса GET

API Fetch позволяет вам извлекать данные с помощью fetch() функция, которая принимает URL ресурса в качестве первого параметра. Вот пример создания простого запроса GET:

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => ответ.JSON()) // Анализ ответа JSON
  .тогда((данным) => {
    консоль.журнал('Почта:', данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Объяснение:

fetch() отправляет HTTP-запрос GET на URL.
response.json() извлекает данные JSON из ответа.
then() обрабатывает данные ответа.
catch() отлавливает любые ошибки.

Использование Async-Await для GET-запросов

Async-await делает код чище. Вот тот же GET-запрос с использованием async-await:

(асинхронной () => {
  стараться {
    Const ответ = Ждите получать('https://jsonplaceholder.typicode.com/posts/1');
    Const данные = Ждите ответ.JSON();
    консоль.журнал('Почта:', данные);
  } поймать (ошибка) {
    консоль.ошибка('Ошибка:', ошибка);
  }
}) ();

Основные преимущества использования Async-Await:

Это упрощает обработку обещаний, избегая вложенных .then() звонки.
Его легче читать, особенно в случае сложной логики.

Извлечение нескольких ресурсов

Вы также можете получить несколько ресурсов одновременно. Вот пример:

получать('https://jsonplaceholder.typicode.com/posts')
  .тогда((ответ) => ответ.JSON())
  .тогда((данным) => {
    консоль.журнал(«Сообщения:», данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Этот код извлекает список сообщений из API и выводит их в консоль.

Добавление параметров запроса

Чтобы включить параметры запроса в запрос GET, добавьте их к URL-адресу следующим образом:

Const идентификатор пользователя = 1;
получать(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .тогда((ответ) => ответ.JSON())
  .тогда((данным) => {
    консоль.журнал(«Сообщения пользователя:», данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Обработка ответов

API Fetch обеспечивает гибкость в обработке различных типов ответов, таких как простой текст, JSON или двоичный. Вот как можно обрабатывать ответ в виде простого текста:

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => ответ.текст())
  .тогда((данным) => {
    консоль.журнал(«Ответ простым текстом:», данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Запросы GET — это хлеб и масло любого веб-API. С помощью Fetch API вы можете делать их и сохранять свой код чистым и читаемым. В следующем разделе мы рассмотрим обработку заголовков ответов в Fetch API.

Обработка заголовков ответа в Fetch API

Заголовки ответа предоставляют важные метаданные об ответе HTTP, такие как тип контента, сведения о сервере или инструкции по кэшированию. С помощью Fetch API вы можете легко получить доступ и работать с этими заголовками.

Доступ к заголовкам ответа

The Response объект, возвращаемый fetch() Функция имеет свойство заголовков. Это свойство является Headers объект, который позволяет читать и изменять заголовки ответа. Вот пример:

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => {
    // Цикл по заголовкам
    для (позволять [ключ, значение] of ответ.Заголовки) {
      консоль.журнал(`${ключ}: ${значение}`);
    }
    возвращают ответ.JSON();
  })
  .тогда((данным) => {
    консоль.журнал('Почта:', данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Что здесь происходит:

response.headers — это объект со всеми заголовками, возвращаемыми сервером.
Цикл for…of проходит по каждому заголовку и выводит пары ключ-значение.

Часто используемые заголовки

Некоторые из наиболее распространенных заголовков:

Content-Type: Тип носителя ресурса (например, application/json)
Cache-Control: Определяет поведение кэширования.
Авторизация: Содержит учетные данные аутентификации.

Вы можете получить доступ к определенным заголовкам, используя get() Метод:

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => {
    Const ТипСодержания = Ответ.Заголовки.получить('Тип содержимого');
    консоль.журнал(«Тип контента:», ТипСодержимого);
    возвращают ответ.JSON();
  })
  .тогда((данным) => {
    консоль.журнал('Почта:', данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

CORS и ограниченные заголовки

При использовании Fetch API в браузере правила Cross-Origin Resource Sharing (CORS) могут ограничивать доступ к заголовкам. По умолчанию отображаются только следующие заголовки:

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

В Node.js ничего из этого не применяется, поэтому у вас есть полный доступ ко всем заголовкам.

Практический пример использования: проверка статуса ответа

Вы можете использовать заголовки для проверки статуса ответа перед обработкой тела.

получать('https://jsonplaceholder.typicode.com/posts/1')
  .тогда((ответ) => {
    if (ответ.ok) {
      консоль.журнал(«Ответ в порядке»);
    } еще {
      консоль.журнал(«Ошибка ответа:», ответ.статус);
    }
    возвращают ответ.JSON();
  })
  .тогда((данным) => {
    консоль.журнал('Почта:', данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

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

Понимая и используя заголовки ответов, вы можете управлять метаданными, обрабатывать ошибки и оптимизировать свои запросы API. В следующем разделе мы рассмотрим, как отправлять запросы POST с помощью Fetch API.

Отправка POST-запросов с помощью Fetch API

Fetch API упрощает отправку HTTP POST-запросов к API. Запрос POST используется, когда вы хотите отправить данные на сервер, например, отправка данных формы или создание новой записи в базе данных.

Отправка базового POST-запроса

Чтобы отправить запрос POST, вам необходимо включить method недвижимость в fetch() Объект options. Кроме того, свойство body используется для указания данных, которые вы хотите отправить. Вот пример:

Const URL = 'https://jsonplaceholder.typicode.com/posts';
Const данные = {
  название: «Новая почта»,
  тело: «Вот содержание поста».,
  ID пользователя: 1,
};

получать(url, {
  метод: 'ПОЧТА',
  Заголовки: {
    «Тип контента»: 'приложение/json',
  },
  тело: JSON.стягивать(данные), // Преобразовать данные в строку JSON
})
  .тогда((ответ) => ответ.JSON())
  .тогда((данным) => {
    консоль.журнал('Ответ:', данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Что здесь происходит:

URL: Конечная точка для запроса POST.
Способ доставки: Указывает метод HTTP (POST).
Заголовки: определяет Content-Type чтобы сообщить серверу, что данные имеют формат JSON.
Тело: Содержит данные в формате JSON для отправки.

Зачем использовать JSON.stringify?

При отправке данных с помощью Fetch API это должна быть строка. Вот где JSON.stringify() входит — он преобразует ваш объект JavaScript в строку JSON, понятную серверу.

Обработка ответов сервера

После отправки запроса POST вы обычно получаете ответ от сервера. Ответ может включать статус запроса и любые новые данные, созданные на сервере.

получать(url, {
  метод: 'ПОЧТА',
  Заголовки: {
    «Тип контента»: 'приложение/json',
  },
  тело: JSON.стягивать(данные),
})
  .тогда((ответ) => {
    if (ответ.ok) {
      консоль.журнал(«POST-запрос выполнен успешно»);
    } еще {
      консоль.журнал('Ошибка:', ответ.статус);
    }
    возвращают ответ.JSON();
  })
  .тогда((данным) => {
    консоль.журнал(«Создан ресурс:», данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Реальный вариант использования

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

Const пользователь = {
  имя: 'Джон Доу',
  e-mail: '[электронная почта защищена]',
  password: «безопасный пароль»,
};

получать('https://example.com/api/register', {
  метод: 'ПОЧТА',
  Заголовки: {
    «Тип контента»: 'приложение/json',
  },
  тело: JSON.стягивать(пользователь),
})
  .тогда((ответ) => ответ.JSON())
  .тогда((данным) => {
    консоль.журнал(«Пользователь зарегистрирован:», данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка('Ошибка:', ошибка);
  });

Использование Fetch API для запросов POST позволяет отправлять данные на серверы. Далее мы рассмотрим обработку ошибок, чтобы ваши запросы были надежными.

Обработка ошибок в Fetch API

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

Почему важна обработка ошибок?

При выполнении HTTP-запросов может произойти многое:

Сервер не работает.
Неверный URL-адрес.
Реакция оказалась не такой, как мы ожидали.
Сеть прервет запрос.

Если вы не обрабатываете ошибки, ваше приложение выйдет из строя или зависнет, а пользователю придется несладко.

Обработка ошибок с помощью `then` и `catch`

Fetch API возвращает Promise. Вы можете использовать .catch() метод обработки ошибок во время запроса.

Рассмотрим пример:

получать('https://invalid-url.example.com')
  .тогда((ответ) => {
    if (!ответ.ok) {
      бросать новый Ошибка(`Ошибка HTTP! Статус: ${response.status}`);
    }
    возвращают ответ.JSON();
  })
  .тогда((данным) => {
    консоль.журнал('Данные:', данные);
  })
  .поймать((ошибка) => {
    консоль.ошибка(«Ошибка при загрузке:», ошибка);
  });

Ключевые моменты:

if (!response.ok) проверяет, находится ли статус ответа HTTP в диапазоне 200–299. Если нет, выдает ошибку.
.catch() отлавливает как сетевые ошибки, так и ошибки, возникающие в .then() цепь.

Использование Try-Catch с Async-Await

Для более чистого кода можно использовать async и await с try-catch блок для обработки ошибок.

Вот тот же пример:

(асинхронной () => {
  стараться {
    Const ответ = Ждите получать('https://invalid-url.example.com');
    if (!ответ.ok) {
      бросать новый Ошибка(`Ошибка HTTP! Статус: ${response.status}`);
    }
    Const данные = Ждите ответ.JSON();
    консоль.журнал('Данные:', данные);
  } поймать (ошибка) {
    консоль.ошибка(«Ошибка при загрузке:», ошибка);
  }
}) ();

Преимущества Try-Catch:

Легче читать и понимать, особенно в случае сложной логики.
Группирует код обработки ошибок в одном месте.

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

По умолчанию Fetch API не поддерживает тайм-ауты запросов. Однако вы можете создать пользовательский тайм-аут с помощью Promise.race().

Вот как это реализовать:

Const fetchWithTimeout = (URL, параметры, время ожидания = 5000) => {
  возвращают Обещание.раса([
    получать(url, параметры),
    новый Обещание((_, отклонять) => setTimeout(() => отвергать(новый Ошибка(«Время ожидания запроса истекло»)), тайм-аут)),
  ])?
};

(асинхронной () => {
  стараться {
    Const ответ = Ждите fetchWithTimeout('https://example.com/data', {}, 3000);
    Const данные = Ждите ответ.JSON();
    консоль.журнал('Данные:', данные);
  } поймать (ошибка) {
    консоль.ошибка('Ошибка:', ошибка.сообщение);
  }
}) ();

Что здесь происходит:

Promise.race() запускает два обещания: одно для запроса на выборку и одно для тайм-аута.
Если запрос на выборку занимает больше времени, чем тайм-аут (в этом примере 3 секунды), обещание тайм-аута отклоняет операцию.

Распространенные сценарии ошибок, на которые следует обратить внимание

Неверные URL-адреса: Убедитесь, что конечные точки API указаны правильно. 2.** Проблемы с сетью**: Обрабатывайте случаи, когда сеть недоступна.
Ответы не в формате JSON: Если сервер отправляет данные, отличные от JSON, метод response.json() выдаст ошибку.
Проблемы CORS: Убедитесь, что сервер разрешает кросс-доменные запросы, если вы работаете в браузере.

Регистрация ошибок для отладки

При возникновении ошибки ее регистрация может помочь в отладке:

получать('https://example.com/api')
  .тогда((ответ) => ответ.JSON())
  .поймать((ошибка) => {
    консоль.ошибка(«Не удалось получить:», ошибка);
    // Зарегистрируйтесь в службе мониторинга ошибок, например Sentry или Rollbar
  });

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

Fetch API против Axios: основные различия

При работе с HTTP-запросами в Node.js или браузере есть два варианта: Fetch API и Axios. Оба хороши, но отличаются. Давайте сравним их по ключевым пунктам, чтобы помочь вам сделать выбор.

На изображении показаны основные различия между Fetch API и Axios.

Какой из них вы должны использовать?

Оба API Fetch и Axios имеют свои области применения, но все зависит от вашего проекта:

Использовать API Fetch если вам нужно нативное решение без внешних зависимостей, и ваш проект ориентирован на современные браузеры или Node.js (с экспериментальной поддержкой).
Используйте Аксиос если вам нужно больше функций, таких как перехватчики, более простая обработка ошибок, встроенные тайм-ауты или отмена запроса. Axios также хорош для поддержки старых браузеров.

Идем дальше: что делать, если Fetch недостаточно?

API Fetch хорошо подходит для создания простых HTTP-запросов в Node.js, но что делать, если:

Сайт в значительной степени использует JavaScript.
Вас блокируют такие средства защиты от ботов, как CAPTCHA или ограничения по IP?
Вам необходимо надежно масштабировать запросы до тысяч страниц

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

Он автоматически обходит CAPTCHA и избегает блокировок по IP.
Он отображает JavaScript, поэтому вы получаете полный HTML даже с современных сайтов.
Он легко масштабируется без необходимости управления прокси-серверами или браузерами без интерфейса.

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

FAQ

В. В чем разница между Fetch API и Axios?

Fetch API и Axios — это способы делать HTTP-запросы в JavaScript, но есть ключевые различия. Fetch — это встроенная функция браузера, которая поставляется с экспериментальной поддержкой Node.js, Axios — сторонняя библиотека. Axios упрощает такие вещи, как автоматический парсинг JSON и перехватчики запросов/ответов, которые Fetch не предлагает из коробки. Fetch, с другой стороны, проще и не требует дополнительных зависимостей.

В. Как обрабатывать ошибки с помощью Fetch API в Node.js?

Обработка ошибок в Fetch API проста. Поскольку Fetch возвращает обещание, вы можете использовать .catch() для обнаружения ошибок или использования try...catch async/await. Например, используя async/await, вы можете обрабатывать ошибки следующим образом:

стараться {
  Const ответ = Ждите получать(URL-адрес);
  Const данные = Ждите ответ.JSON();
  консоль.журнал(данные);
} поймать (ошибка) {
  консоль.ошибка('Ошибка:', ошибка);
}

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

В. Могу ли я использовать Fetch API для POST-запросов в Node.js?

Да, Fetch API отлично подходит для выполнения POST-запросов. Вам просто нужно указать method as POST и включать body (обычно JSON). Вот пример:

Const ответ = Ждите получать(url, {
  метод: 'ПОЧТА',
  Заголовки: { «Тип контента»: 'приложение/json' },
  тело: JSON.стягивать({ ключ: 'ценность' }),
});
Const данные = Ждите ответ.JSON();
консоль.журнал(данные);

Он отправляет данные на сервер и обрабатывает ответ как JSON.

Как делать HTTP-запросы в Node.js с помощью Fetch API

Оглавление

Зачем использовать Fetch API для HTTP-запросов?

Настройка Fetch API в Node.js

Шаг 1: Проверьте версию Node.js

Шаг 2: Включите экспериментальный API Fetch (необязательно)

Шаг 3: Создайте проект Node.js

Шаг 4: Используйте Fetch API

Использование сторонней библиотеки (необязательно)

Выполнение запросов GET с помощью Fetch API

Пример простого запроса GET

Использование Async-Await для GET-запросов

Извлечение нескольких ресурсов

Добавление параметров запроса

Обработка ответов

Обработка заголовков ответа в Fetch API

Доступ к заголовкам ответа

Часто используемые заголовки

CORS и ограниченные заголовки

Практический пример использования: проверка статуса ответа

Отправка POST-запросов с помощью Fetch API

Отправка базового POST-запроса

Обработка ответов сервера

Реальный вариант использования

Обработка ошибок в Fetch API

Почему важна обработка ошибок?

Обработка ошибок с помощью then и catch

Использование Try-Catch с Async-Await

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

Распространенные сценарии ошибок, на которые следует обратить внимание

Регистрация ошибок для отладки

Fetch API против Axios: основные различия

Идем дальше: что делать, если Fetch недостаточно?

FAQ

В. В чем разница между Fetch API и Axios?

В. Как обрабатывать ошибки с помощью Fetch API в Node.js?

В. Могу ли я использовать Fetch API для POST-запросов в Node.js?

Хассан Рехан

наше решение

Умный прокси-сервер ИИ

Поделитесь этой публикацией!

Похоже на «Как делать HTTP-запросы в Node.js с помощью Fetch API»

Как отправлять заголовки HTTP с помощью cURL

Как отправлять запросы GET с помощью cURL

Как создать веб-скрейпер с помощью Node.js

Кэш Python: как ускорить ваш код с помощью эффективного кэширования

Наиболее читаемые руководства по продвинутому веб-скрапингу

Рейтинг Scraper API Альтернатива в 2025 году — лучшая замена

Основные проблемы при извлечении результатов поиска Google и способы их преодоления

Что такое облачное хранилище? Типы и применение облачного хранилища

Начните сканировать и сканировать Интернет уже сегодня

Обработка ошибок с помощью `then` и `catch`