Komunikacja z API - zestawienie metod

Komunikacja z API jest obecnym trendem

Czasy, w których tworzyło się statyczny content bezpowrotnie odchodzą do lamusa. Obecnie prawie każda strona korzysta z bazy danych i wyświetla zasoby w niej zawarte. Jednym ze sposobów serwowania danych jest komunikacja z API, czyli Application Programming Interface. Poprzez odpowiednie endpointy możemy wykonywać operacje na danych tj. wyświetlanie, dodawanie, edytowanie czy też usuwanie. Zazwyczaj podczas komunikacji z API wykorzystujemy format danych JSON.

Komunikacja z API - ścieżka — Odpowiednia ścieżka pozwala nam uzyskać dostęp do określonych zasobów.

Głównymi zaletami korzystania z API jest brak konieczności przeładowania strony przy wyświetlaniu danych. Takie dane możemy pobrać w dowolnym momencie i nie musimy przy tym odświeżać całej strony. Inną zaletą jest brak mieszania warstwy backendowej z frontendową, tak jak ma to miejsce na przykład w prostych aplikacjach PHP, czy tez tradycyjnych szablonach WordPressa, gdzie miesza się funkcje PHP z znacznikami HTML, przez co przynajmniej w moim odczuciu przy nieumiejętnym procesie tworzenia projektu powstaje chaos.

Zatem jak skorzystać z API?

Komunikacja z API może przebiegać na kilka sposobów, które pokrótce teraz omówię:

XMLHttpRequest

Jest to dość leciwa już metoda, która niemniej jednak zrewolucjonizowała proces tworzenia aplikacji internetowych. Obecnie XMLHttpRequest jest wypierany przez nowsze i wydajniejsze technologie. Niewątpliwą zaletą tego rozwiązania jest brak konieczności korzystania z dodatkowych bibliotek. Poniżej podaję prosty przykład komunikacji z API:


function loadContent() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
  };
  xhttp.open('GET', 'https://swapi.co/api/people/1', true);
  xhttp.send();
}
loadContent();

Fetch

Fetch jest kolejnym ze sposobów, który możemy wykorzystać do pracy z API. W tym przypadku sprawa wygląda o wiele lepiej, praca z Fetch jest szybsza i przyjemniejsza, a to za sprawą Promisów! Tu również nie korzystamy z żadnych bibliotek ani rozszerzeń. Fetch domyślnie ma ustawioną metodę GET, a jeśli chcemy skorzystać z innej metody to musimy ją podać w drugim parametrze, który jest obiektem pozwalającym na doprecyzowanie zapytania. Również sam kod jest znacznie chudszy i schludniejszy:


fetch('https://swapi.co/api/people/1')
.then(response => response.json())
.then(data => console.log(data));

Axios

Axios jest biblioteką stworzoną na potrzeby komunikacji z API. Za użyciem Axiosa przemawiają drobnostki, które jednak w moim przekonaniu sprawiają, że korzysta się z niego o wiele wygodniej niż z Fetcha. Jedną z takich drobnostek jest stworzenie osobnych metod dla każdej z metod HTTP. Metody takie jak axios.get() czy axios.post() wyglądają lepiej, schludniej i są bardziej czytelne niż w Fetchu. Ponadto omijamy drugą linię z przykładu wykorzystania fetch() i nie musimy korzystać z metody .json().

Inną z zalet jest możliwość ustawienia globalnej konfiguracji, takiej jak domyślny URL, nagłówki itp. Za użyciem Axiosa przemawia też liczba gwiazdek na GitHubie, która wynosi ponad 43 tysiące, co mówi samo za siebie!


import 'axios' from axios;

axios('https://swapi.co/api/people/1')
.then(data => console.log(response));

Jeśli chcesz zobaczyć więcej przykładów zastosowania Axiosa, zajrzyj to TEGO repozytorium, gdzie znajdziesz kilkadziesiąt przykładów na to, jakie możliwości oferuje ta biblioteka.

Testowanie API

Często nie chcemy pisać kodu, aby testować konkretne endpointy. Możemy skorzystać z świetnego narzędzia, jakim jest Postman. Jest to bardzo wygodny program, którego używam podczas tworzenia swoich aplikacji. Mamy do dyspozycji całą masę przydatnych opcji i informacji. Zresztą sami zobaczcie:

A co jeśli nie mam własnego API?

W Internecie możesz znaleźć liczne API gotowe do użycia w Twoim projekcie. Jednym z takich jest SWAPI – API w uniwersum Gwiezdnych Wojen. Korzystałem z niego w trakcie pisania tego artykułu i śmiało mogę Ci je polecić!

Możesz również stworzyć stronę na WordPressie i skorzystać z WordPress REST API!

Myślę, że wyczerpałem temat wystarczająco, a jeśli znasz inne możliwości na komunikację z API to podziel się nimi w komentarzu!