JavaScript · API · Начальный

Параметры запроса

5 задач

Фильтруйте, ищите, сортируйте и пагинируйте результаты API с помощью URLSearchParams.

Краткое введение в тему и пояснения перед упражнениями (упражнения ниже):

Фильтрация и сортировка с URLSearchParams

#
/api/products/ принимает параметры запроса для фильтрации и сортировки результатов. Самый чистый способ строить их в JavaScript — `URLSearchParams`: ```javascript const params = new URLSearchParams({ category: 'bedroom', ordering: 'price' }); const url = `https://apilearn.tukas.dev/api/products/?${params}`; // → https://apilearn.tukas.dev/api/products/?category=bedroom&ordering=price ``` Объект params можно передавать напрямую в `fetch`, добавив его к строке URL. `URLSearchParams` автоматически преобразуется в корректную строку запроса через `.toString()` (который шаблонные строки вызывают неявно). Доступные параметры для `/api/products/`: ``` category Фильтр по slug категории, например "bedroom", "kitchen" ordering Сортировка по полю: "price" (по возрастанию), "-price" (по убыванию), "name", "-name" search Полнотекстовый поиск по названию и описанию page Номер страницы (по умолчанию 1) page_size Результатов на страницу (по умолчанию 20, максимум 100) ``` Реальные slug-и категорий: ``` kitchen dining-room bedroom living-room office bathroom kids-room outdoor decor hardware storage lighting ``` Примеры: ```javascript // Самые дешёвые товары категории bedroom new URLSearchParams({ category: 'bedroom', ordering: 'price' }) // Поиск товаров "oak", 20 на страницу new URLSearchParams({ search: 'oak', page_size: 20 }) // Самые дорогие товары new URLSearchParams({ ordering: '-price' }) ```

Фильтрация, сортировка и поиск — паттерны

#
Фильтрация по категории: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getProductsByCategory(category) { const params = new URLSearchParams({ category }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); return data.results; } const bedProducts = await getProductsByCategory('bedroom'); console.log(`Найдено ${bedProducts.length} товаров категории bedroom`); ``` Сортировка — от самых дешёвых: ```javascript async function getCheapestProducts(n = 5) { const params = new URLSearchParams({ ordering: 'price', page_size: n }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); for (const p of data.results) { console.log(`${p.name}: ${p.price}`); } } getCheapestProducts(5); ``` Поиск: ```javascript async function searchProducts(query) { const params = new URLSearchParams({ search: query }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); console.log(`"${query}" найдено: ${data.count} товаров`); return data.results; } searchProducts('oak'); ``` Комбинация нескольких параметров: ```javascript const params = new URLSearchParams({ category: 'dining-room', ordering: '-price', page_size: 5, }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); console.log(data.results.map(p => p.name)); ```

Справочник параметров запроса

#
**Построение URL** ```javascript // Сокращённая запись объектом const params = new URLSearchParams({ category: 'bedroom', ordering: 'price' }); const url = `${BASE_URL}/api/products/?${params}`; // Добавление по одному const params = new URLSearchParams(); params.append('category', 'bedroom'); params.append('ordering', 'price'); ``` **Параметры /api/products/** ``` category string Фильтр по slug категории (список ниже) ordering string "price" | "-price" | "name" | "-name" search string Полнотекстовый поиск page number Номер страницы (по умолчанию 1) page_size number Результатов на страницу (по умолчанию 20, максимум 100) ``` **Доступные slug-и категорий** ``` kitchen bedroom living-room dining-room office bathroom kids-room outdoor decor hardware storage lighting ``` **Форма пагинированного ответа** ```javascript { count: 35, // всего результатов, соответствующих фильтру next: "...?page=2", // URL следующей страницы или null previous: null, // URL предыдущей страницы или null results: [...] // массив товаров для этой страницы } ``` **Комбинация category + ordering + search** ```javascript const params = new URLSearchParams({ category: 'bedroom', ordering: '-price', search: 'oak', }); ```

Упражнения:

01

Фильтрация по категории

#

Получите все товары категории "bedroom" с помощью `URLSearchParams`. Выведите количество результатов и название первого товара.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // URLSearchParams для фильтрации category='bedroom'
  // вывести count и название первого товара
}

main();
Решение 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const params = new URLSearchParams({ category: 'bedroom' });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  console.log(data.count);
  console.log(data.results[0].name);
}

main();
02

Сортировка по цене

#

Получите 5 самых дешёвых товаров с помощью `ordering=price` и `page_size=5`. Выведите название и цену каждого.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // ordering=price, page_size=5
  // вывести название и цену каждого
}

main();
Решение 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const params = new URLSearchParams({ ordering: 'price', page_size: 5 });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  for (const p of data.results) {
    console.log(p.name, p.price);
  }
}

main();
03

Поиск товаров

#

Найдите товары по запросу "oak" с помощью параметра `search`. Выведите общее количество найденных и название каждого.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // search=oak, вывести count и каждое название
}

main();
Решение 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const params = new URLSearchParams({ search: 'oak' });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  console.log(`${data.count} результатов`);
  for (const p of data.results) {
    console.log(p.name);
  }
}

main();
04

Комбинация категории и сортировки

#

Получите самые дорогие товары категории "dining-room" — объедините `category=dining-room` и `ordering=-price`. Выведите название и цену каждого результата на первой странице.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // category=dining-room, ordering=-price
}

main();
Решение 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const params = new URLSearchParams({ category: 'dining-room', ordering: '-price' });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  for (const p of data.results) {
    console.log(p.name, p.price);
  }
}

main();
05

Переиспользуемая функция getProducts()

#

Напишите функцию `getProducts(params = {})`, которая принимает объект параметров запроса и возвращает массив `results`. Вызовите её тремя способами: без параметров, с `category` и с `search` + `ordering`.

const BASE_URL = 'https://apilearn.tukas.dev';

async function getProducts(params = {}) {
  // построить URL из params, вернуть массив results
}

async function main() {
  const all = await getProducts();
  console.log('all:', all.length);

  const bedroom = await getProducts({ category: 'bedroom' });
  console.log('bedroom:', bedroom.length);

  const found = await getProducts({ search: 'wood', ordering: 'price' });
  console.log('wood asc:', found.length);
}

main();
Решение 
const BASE_URL = 'https://apilearn.tukas.dev';

async function getProducts(params = {}) {
  const qs = new URLSearchParams(params);
  const response = await fetch(`${BASE_URL}/api/products/?${qs}`);
  const data = await response.json();
  return data.results;
}

async function main() {
  const all = await getProducts();
  console.log('all:', all.length);

  const bedroom = await getProducts({ category: 'bedroom' });
  console.log('bedroom:', bedroom.length);

  const found = await getProducts({ search: 'wood', ordering: 'price' });
  console.log('wood asc:', found.length);
}

main();