Komunikacja API w React z Axios – Kurs React – cz. 9

Korzystanie z API to podstawowa czynność Front-end Developera. W artykule przedstawiam jak to zrobić za pomocą paczki axios.

Czym jest axios?

Jest to klient HTTP oparty na Promisach dla przeglądarki oraz Node.js.

Zobacz czym jest Promise na MDN.

Metody Axios

Opis metod, które zostały zaimplementowane w axios można znaleźć na MDN.

Opis metod żądań (request methods) na MDN.

Po prostu Axios

Zamiast konkretnej metody można użyć axios z odpowiednią konfiguracją.

axios({
  method: 'post',
  url: '/example/12345',
  data: {
    test: 'example',
    name: 'Random'
  }
});

Axios GET

axios.get(url[, config])

Axios DELETE

axios.delete(url[, config])

Axios HEAD

axios.head(url[, config])

Axios OPTIONS

axios.options(url[, config])

Axios POST

axios.options(url[, config])

Axios PUT

axios.put(url[, data[, config]])

Axios PATCH

axios.patch(url[, data[, config]])

Instalacja

Z pomocą npma:

npm install axios

Yarn:

yarn add axios

Oczywiście jest możliwość zainstalowania z pomocą bowera lub skorzystania z CDNa. Zobacz sekcje instalacji w dokumentacji.

Wybór API

Przed rozpoczęciem pracy z axios warto mieć przygotowane API, z którego będzie korzystać. Ja skorzystałem z listy publicznych API i wybrałem API, które wyświetli listę ofert pracy z GitHub (GitHub Jobs).

Szczegóły API można znaleźć na oficjalnej dokumentacji GitHub Jobs.

W tym przypadku będzie mnie interesować tylko lista, więc to będzie ten endpoint: GET /positions.json.

Na powyższym zrzucie ekranu zostało opisane API oraz jak z niego korzystać. Tak naprawdę polega to na budowaniu odpowiedniego adresu URL API.

Po kliknięciu w przykładowy link przeniesie nas na stronę z danymi w postaci JSONa.

Komunikacja z API w React

Wykonywanie zapytania API

W pierwszej kolejności powstanie plik, w którym znajdzie się funkcja wykonująca zapytanie do API.

Kilka prostych linijek.

Najpierw import axiosa

import axios from 'axios';

Potem definiuję consta z adresem API.

const GITHUB_JOBS_API_URL = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json';

Ze względu na problemy w CRA z CORSem adres API poprzedza adres proxy, który pozwoli na poprawne wykonanie zapytania. Żeby API działało należy w aplikacji serwerowej dodać nagłówek: Access-Control-Allow-Origin z wartością ’*’. W tym przypadku proxy robi to za nas. Jednak trzeba uważać, ponieważ korzystanie z zewnętrznego serwisu do przepuszczania zapytań API może być ryzykowne. W tym przypadku to tylko ćwiczenia, więc nie ma co się martwić.

No i wreszcie kod, który wykonuje zapytanie

export function getGitHubJobs() {
    return axios.get(GITHUB_JOBS_API_URL);
}

Funkcja zwraca Promisa, więc dane będą dostępne w .then();.

Wyświetlanie danych z API w komponencie

Teraz będzie potrzebny komponent, który wykorzysta wcześniej stworzoną funkcję.

Na początku potrzebne importy

import React, {Component} from 'react';
import { getGitHubJobs } from '../../api/gitHubJobs';

W konstruktorze należy dodać inicjalizacje state.

constructor() {
     super();

     this.state = {
         gitHubJobs: [],
     }
}

Dalej pobieranie danych w metodzie cyklu życia

    componentDidMount() {
        getGitHubJobs().then((response) => {
            this.setState({
                gitHubJobs: response.data,
            });
        }).catch(err=>console.log(err.message));
    }

No i ostatnia czynność to renderowanie wartości zapisanych w state za pomocą .map(), który zwraca div z tytułem (gitHubJobsList).

render() {
        const {gitHubJobs} = this.state;

        const gitHubJobsList = gitHubJobs.map((item, index) => {
            return (
                <div key={`${item.title}${index}`}>
                    {item.title}
                </div>
            ); 
        });

        return (
            <div>
                {gitHubJobsList}
            </div>
        );
    }

Wynikiem tego jest lista ofert pracy z GitHub Jobs.

Usprawniena

Komponent powstał tylko w celach ćwiczebnych, ale warto wiedzieć jakie elementy poprawić. Poniżej kilka poprawek, które można zastosować.

gitHubJobs.js

• dodanie parametrów do zapytania (aby można było modyfikować zapytanie)

Axios.js

• dodać loader podczas oczekiwania na dane
• wydzielić komponent z pojedynczym elementem w gitHubJobsList
• obsłużyć błędy (np. wyświetlić stosowny komunikat w przypadku błędu pobierania danych)

Podsumowanie

Pobieranie danych z API nie wymaga wiedzy specjalistycznej i jak widać jest dosyć prosta. Oczywiście poziom skomplikowania rośnie w przypadku większych aplikacji gdzie musimy zarządzać danymi z jednego miejsca, co wiąże się z dobrym planowanie architektury – czyli najczęściej zastosowanie takich bibliotek jak React Redux czy Redux Observable.

Materiały

Oficjalna dokumentacja Axios – https://github.com/axios/axios

HTTP Request methods na MDN – https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

Promise na MDN – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise