Добавление параметров запроса в 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.