Добавление параметров запроса в Fetch API: метод GET

Быстрый ответ

Для того чтобы добавить параметры запроса в GET-запрос с помощью JavaScript, используйте объект URLSearchParams:

const params = new URLSearchParams({ search: 'term', limit: '5' }).toString();
fetch(`https://api.example.com/items?${params}`)
  .then(res => res.json())
  .then(data => console.log(data));

Этот код позволяет быстро сформировать строку запроса с нужными параметрами и осуществить запрос.

Корректное кодирование и добавление параметров

Для того чтобы сервер корректно обработал GET-запрос, критически важно верно закодировать параметры в URL. Объект URLSearchParams заботится об этом:

const baseURL = 'https://api.example.com/search';
const searchParams = new URLSearchParams({
  'main-category': 'books',
  'sub-category': 'fiction',
  'sort-by': 'popularity'
});

const encodedURL = `${baseURL}?${searchParams.toString()}`;
fetch(encodedURL)
  .then(response => response.json())
  .then(results => console.log(results))
  .catch(error => console.error('Ошибка:', error));

Правильное кодирование избавляет от возможных ошибок и обеспечивает надёжное взаимодействие с сервером.

Улучшение читаемости с помощью async/await

В асинхронных функциях рекомендуется использование async и await для улучшения читаемости и понятности кода:

async function fetchData() {
  const params = new URLSearchParams({ page: '1', count: '10' }).toString();
  const response = await fetch(`https://api.example.com/items?${params}`);
  return response.json();
}

fetchData().then(data => console.log(data));

При помощи async и await асинхронный код становится похож на синхронный и более понятным.

Получаем все преимущества от использования URLSearchParams

Операции с URLSearchParams не только ограничиваются инициализацией параметров. С его помощью можно удобно манипулировать параметрами:

let searchParams = new URLSearchParams({ author: 'Hemingway' });
searchParams.append('published', '1952');
searchParams.set('author', 'Orwell');
searchParams.delete('published');

for (let p of searchParams) {
  console.log(p);
}

Благодаря URLSearchParams вы сможете произвести контроль параметров запроса.

Расширяем совместимость при помощи Polyfills

Если вам необходима поддержка Internet Explorer или других устаревших браузеров, используйте Polyfills для fetch и URLSearchParams:

import 'whatwg-fetch'; // Polyfill для Fetch
import 'url-search-params-polyfill'; // Polyfill для URLSearchParams

Благодаря Polyfills вы сможете использовать современные API даже в устаревших браузерах.

Особенности использования в Node.js

начиная с версии 18 Node.js включает в себя встроенную поддержку fetch и URLSearchParams. В более старых версиях Node.js или при использовании TypeScript потребуется выполнить следующие импорты:

const fetch = require('node-fetch');
const { URLSearchParams } = require('url');

const params = new URLSearchParams({ foo: 'bar' });

Используйте сторонние библиотеки для работы с fetch

Такие библиотеки, как axios или query-string, могут заметно упростить задачу кодирования и декодирования, особенно при реализации сложной бизнес-логики:

import axios from 'axios';
import { stringify } from 'query-string';

const params = stringify({ filter: 'active', tags: ['print', 'virtual'] });
axios.get(`https://api.example.com/posts?${params}`)
  .then(response => console.log(response.data));

При использовании дополнительных библиотек разработка может проходить значительно прозрачнее и быстрее.

Визуализация

Представьте себя туристом, заблудившимся в большом городе. “Fetch” — это ваша карта города, а параметры запроса — указатели на места, которые вы хотите посетить:

const params = new URLSearchParams({ city: 'Paris', ride: 'FerrisWheel' });
fetch(`/tourist-attractions?${params}`);

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

Создание поддерживаемого кода при помощи функций

Улучшите читаемость и управляемость вашего кода, разделив его на функции:

function createQueryString(params) {
  return Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
}

async function fetchWithSearchParams(url, queryParams) {
  const queryString = createQueryString(queryParams);
  const response = await fetch(`${url}?${queryString}`);
  return response.json();
}

fetchWithSearchParams('https://api.example.com/search', { query: 'JavaScript' })
  .then(data => console.log(data));

Такой подход делает ваш код более понятным и удобным для поддержки.

Гибкое управление параметрами запроса

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

const params = new URLSearchParams();
params.append('topic', 'search-queries');
params.append('topic', 'fetch');
console.log(params.toString()); // "topic=search-queries&topic=fetch"

Используя функционал таких библиотек, как query-string, вы сможете эффективно работать с массивами в качестве параметров:

import { stringify } from 'query-string';

const paramsString = stringify({
  tags: ['nodejs', 'vuejs', 'express'],
  approved: true
}, {
  arrayFormat: 'comma'
});

fetch(`/api/posts?${paramsString}`);

Использование массивов делает работу с запросами ещё более гибкой и удобной.

Полезные материалы

• Использование Fetch API – Веб-API | MDN — Полное руководство по использованию Fetch API.
• URLSearchParams – Веб-API | MDN — Подробное пособие по работе со строками запросов.
• Fetch | javascript.info — Учебник по основам работы с Fetch API.
• Использование Fetch | CSS-Tricks — Практические примеры использования Fetch.
• JavaScript Fetch API — Обучающий материал по использованию Fetch API.
• GitHub – JakeChampion/fetch: A window.fetch JavaScript polyfill. — Polyfill для использования Fetch в старых браузерах.
• Введение в fetch() | Статьи | web.dev — Вводное руководство и лучшие практики использования Fetch API от Google.