5.1 Fetch API
Do wykonywania requestów HTTP w JavaScript często używa się dwóch bibliotek: wbudowanej funkcji fetch i zewnętrznej biblioteki Axios. Obie oferują potężne i elastyczne możliwości do interakcji z API i innymi zasobami sieciowymi.
Fetch API — to wbudowany w przeglądarkę sposób wykonywania requestów HTTP. Opiera się na promesach i oferuje elastyczne i nowoczesne podejście do pracy z requestami sieciowymi.
Prosty przykład zapytania fetch:
let promise = fetch(url, {method, headers,
body})
Główne koncepcje Fetch:
fetch(url, options): główna metoda do wykonywania requestów HTTP- Zwraca promise, który zwraca obiekt Response
Przykład prostego zapytania GET przy użyciu Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Błąd sieci: otrzymano nieprawidłową odpowiedź z serwera');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Błąd podczas wykonywania zapytania: ', error);
});
Przykład zapytania POST przy użyciu Fetch:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Błąd podczas wykonywania zapytania: ', error);
});
Ustawienia Fetch
Fetch API pozwala skonfigurować różne opcje requestu za pomocą obiektu options, takie jak metoda, nagłówki, body i inne.
const options = {
method: 'GET', // lub 'POST', 'PUT', 'DELETE' itd.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // używane dla zapytań POST i PUT
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Błąd podczas wykonywania zapytania: ', error));
5.2 Biblioteka Axios
Axios — to popularna biblioteka do wykonywania requestów HTTP w JavaScript. Oferuje wygodniejsze i bardziej funkcjonalne API w porównaniu do natywnego Fetch API, a także obsługuje wiele dodatkowych możliwości, takich jak automatyczna konwersja JSON, obsługa timeoutów, przerywanie requestów i wsparcie dla starszych przeglądarek.
Instalacja Axios
Axiosa można zainstalować przez npm albo podłączyć przez CDN.
Instalacja przez npm:
npm install axios
Podłączenie w Node.js lub przy użyciu modułowych bundlerów (np. Webpack):
// Dla CommonJS
const axios = require('axios');
// Dla modułów ES6
import axios from 'axios';
Podłączenie przez CDN w przeglądarce:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Prosty przykład zapytania GET:
let promise = axios.get(url)
Prosty przykład zapytania POST:
let promise = axios.post(url, data, config)
Główne koncepcje Axiosa:
- axios(config): główna metoda do wykonywania requestów HTTP
- Przyjmuje obiekt konfiguracji, który może zawierać
url,method,headers,datai inne parametry. - Shortcut methods: Axios oferuje metody dla każdego rodzaju requestu HTTP (
axios.get,axios.post,axios.put,axios.deleteitd.), co upraszcza wykonanie odpowiednich requestów. - Promise: wszystkie metody Axiosa zwracają Promise, który rozwiązuje się do obiektu odpowiedzi lub odrzuca w przypadku błędu.
Przykład prostego zapytania GET z obsługą odpowiedzi i błędów:
axios.get(url)
.then(response => {
// Obsługa pozytywnej odpowiedzi
})
.catch(error => {
// Obsługa błędu
});
Przykład prostego zapytania POST z obsługą odpowiedzi i błędów:
axios.post(url, data, config)
.then(response => {
// Obsługa pozytywnej odpowiedzi
})
.catch(error => {
// Obsługa błędu
});
Przykład prostego zapytania GET przy użyciu Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Błąd podczas wykonywania zapytania: ', error);
});
Przykład zapytania POST przy użyciu Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Błąd podczas wykonywania zapytania: ', error);
});
5.3 Konfiguracja Axios
Ustawienia Axiosa
Axios pozwala konfigurować requesty HTTP za pomocą obiektu config, który zawiera takie parametry,
jak url, method, headers i dane (data).
Poniżej przykład podstawowej konfiguracji:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // może być 'get', 'post', 'put', 'delete' itd.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Nagłówek wskazujący typ danych
},
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Błąd podczas wykonywania zapytania: ', error));
Dodatkowe możliwości Axiosa:
- Parametry zapytania: można dodawać parametry zapytania w URL.
- Przerywanie zapytań: przy użyciu
AbortController. - Timeouty: konfiguracja czasu oczekiwania na odpowiedź.
Przykład użycia parametrów zapytania:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Parametry zapytania są przekazywane przez obiekt params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Błąd podczas wykonywania zapytania: ', error);
});
5.4 Porównanie Fetch i Axios
Teraz porównamy Fetch i Axios pod kluczowymi aspektami:
1. Prostota użycia:
- Fetch: prosty w użyciu dla podstawowych operacji, ale wymaga dodatkowego kodu dla bardziej złożonych scenariuszy (np. konwersja JSON, obsługa timeoutów).
- Axios: oferuje wygodniejsze i potężniejsze API dla bardziej złożonych zapytań.
2. Wsparcie JSON:
- Fetch: trzeba jawnie wywołać
response.json(), aby przekonwertować body odpowiedzi na JSON. - Axios: automatycznie konwertuje odpowiedzi JSON.
3. Timeouty:
- Fetch: brak wbudowanego wsparcia dla timeoutów. Aby je zaimplementować, trzeba użyć
AbortControllerlub dodatkowej logiki. - Axios: pozwala skonfigurować timeouty za pomocą konfiguracji.
4. Interceptory:
- Fetch: brak wsparcia dla interceptorów requestów i odpowiedzi.
- Axios: obsługuje intereptory do wykonywania logiki przed i po zapytaniu.
Przykład z interceptorami w Axios
Interceptory pozwalają wykonać określone akcje przed wysłaniem requestu lub po otrzymaniu odpowiedzi:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Dodanie interceptora dla requestów
axios.interceptors.request.use(config => {
console.log('Zapytanie wysłane do serwera: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Dodanie interceptora dla odpowiedzi
axios.interceptors.response.use(response => {
console.log('Odpowiedź odebrana z serwera: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Przykład zapytania z interceptorami
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Błąd podczas wykonywania zapytania: ', error));
Równoległe zapytania przy użyciu Axios
Dzięki Axios można w łatwy sposób wykonywać równoległe zapytania i obsługiwać wyniki za pomocą Promise.all():
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Błąd podczas wykonywania zapytania: ', error));
GO TO FULL VERSION