Natywne API webowe: 10 alternatyw popularnym bibliotekom JS
Fetch zastępuje Axios, jQuery.ajax i podobne biblioteki. Dostępny od 2017 roku we wszystkich przeglądarkach, obsługuje promisy, strumieniowanie i wszystkie metody HTTP.
Przykład z Axios:
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: { 'Content-Type': 'application/json' }
});
const { data: users } = await api.get('/users');Wersja natywna:
const BASE_URL = 'https://api.example.com';
const res = await fetch(`${BASE_URL}/users`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();
const res2 = await fetch(`${BASE_URL}/users`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Marvel', role: 'developer' })
});
const newUser = await res2.json();Do anulowania żądania służy AbortController:
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort();Kiedy używać bibliotek: w dużych projektach z interceptorami, logiką ponownych prób i centralną autoryzacją.
FormData do serializacji formularzy
FormData automatyzuje zbieranie danych formularzy, w tym plików, bez ręcznej obróbki. Działa od 2015 roku.
Zamiast ręcznego parsowania:
const formData = new FormData(form);
form.addEventListener('submit', async (e) => {
e.preventDefault();
await fetch('/api/upload', {
method: 'POST',
body: formData
});
});Tworzenie programowe:
const formData = new FormData();
formData.append('name', 'Marvel');
formData.append('avatar', fileInput.files[0]);Przeglądarka automatycznie ustawia multipart/form-data z boundary.
Ograniczenia: brak walidacji i zarządzania stanem wieloetapowych formularzy — tu potrzebne są React Hook Form lub Formik.
URL i URLSearchParams do analizy linków
Natywne klasy URL i URLSearchParams zastępują regex i biblioteki typu URL.js. Pełna obsługa od 2018 roku.
const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results');
url.hostname; // 'example.com'
url.searchParams.get('q'); // 'web apis'
url.searchParams.set('page', '3');
url.searchParams.append('filter', 'new');
console.log(url.toString());Tworzenie ciągu zapytania:
const params = new URLSearchParams({ q: 'hello world', page: '1' });
params.toString(); // 'q=hello+world&page=1'Automatyczne kodowanie/dekodowanie eliminuje błędy parsowania.
Popover API do elementów podręcznych
Od stycznia 2025 roku (Chrome 114+, Firefox 125+, Safari 17+) Popover API realizuje tooltips, listy rozwijane i popowery bez Floating UI czy Tippy.js.
Oznaczenie HTML:
<button popovertarget="my-popover">Pokaż podręcznik</button>
<div id="my-popover" popover>Zawartość podręcznika</div>Sterowanie programowe:
const popover = document.querySelector('#my-popover');
popover.showPopover();
popover.hidePopover();Stylizacja:
#my-popover:popover-open {
animation: fadeIn 0.2s ease-out;
}
#my-popover::backdrop {
background: rgba(0, 0, 0, 0.15);
}Wbudowana obsługa warstwy najwyższego poziomu, light dismiss (Esc/klik poza), fokus-tarp i nawigacja klawiaturą.
popover="auto" – automatyczne zamykanie, popover="manual" – jawnym zamknięcie.
Gdy biblioteki lepsze: wymagane precyzyjne pozycjonowanie z middleware (flip, shift).
Zalety natywnych API
Przejście na wbudowane interfejsy daje:
- Zero rozmiaru bundle – API zintegrowane z silnikiem przeglądarki
- Wydajność – wykonanie poza głównym wątkiem tam, gdzie to możliwe
- Wsparcie – aktualizacje od producentów przeglądarek
- Kompatybilność – działają w Node.js (gdzie dostępne)
- Mniejsze ryzyko – brak kodu zewnętrznych
Ważne informacje
- Nattywne API obejmują 80–90% typowych zadań, zmniejszając zależności
- Fetch + AbortController całkowicie zastępuje podstawowego klienta HTTP
- FormData rozwiązuje 95% przypadków przesyłania formularzy bez bibliotek
- URLSearchParams eliminuje błędy regex w parsowaniu
- Popover API standardyzuje elementy interfejsu z dostępnością
Te interfejsy pozwalają zoptymalizować projekty poziomu middle/senior bez utraty funkcjonalności.
— Editorial Team
Brak komentarzy.