This is an old revision of the document!

Laboratorul 07: Integrare Frontend-Backend

Scopul laboratorului

Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce un pachet important, cel pentru axios, Axios, cu care vom putea face aceasta integrare.

Ce veti invata la acest laborator?

Cum sa interactionati cu un server, cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul.

Ce este Axios?

Axios este un client HTTP pentru node.js sau pentru browser. Cu ajutorul acestuia putem sa:

interceptam cererea sau raspunsul
transformam datele cererii sau al raspunsului
anulam cereri
transformam automat raspunsul pentru format JSON

Configurarile necesare

1. Instalare Axios

npm install axios

2. Fisier de configurare rute

Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele.

const base = "https://localhost:7002/api/v1/";
const routes = {
    books: {
        addBook: "Books/addBook",
        getAll: "Books/viewAllBooks",
        getBook: (id) => `Books/viewStatusAboutBook/${id}`,
        deleteBook: (id) => `Books/deleteBook/${id}`,
    },
    metrics: {
        getBook: (id) => `Metrics/metricsAboutBook/${id}`,
    },
    rentals: {
        rentBook: "Rentals/rentBook",
        myRentals: "Rentals/viewMyRentals",
        returnBook: (id) => `Rentals/returnBook/${id}`,
    },
    profile: {
        setupProfile: "Profiles/registerProfile",
        getProfile: "Profiles/viewProfile",
    },
};

export { base, routes };

3. Configurare instanta Axios

De ce o instanta de Axios? Pentru ca in diferite cazuri avem nevoie de o configurare mai specifica pentru interactiunea cu backend-ul. De asemenea, aceasta instanta ne ajuta pentru a folosi interceptori.

Interceptorii ne pot ajuta in 2 moduri:

Daca vrem sa modificam orice cerere inainte sa o trimitem (ex: sa atasam un header in plus)
Daca vrem sa gestionam datele primite de la server

In cazul nostru, nu a trebuit sa folosim interceptori.

import axios from "axios";
import { base } from "./Api";

const axiosInstance = axios.create({
    baseURL: base,
    timeout: 1000,
});

export default axiosInstance;

4. Folosirea instantei pentru a face cereri

Mai jos puteti gasi doua exemple de functii care fac doua cereri: una de tip GET - pentru a cere toate cartile si una de tip POST - pentru a adauga o carte. Primul pas in ambele este de a prelua access token-ul provenit de la auth0. Aceasta actiune o facem folosind functia getAccessTokenSilently() pe care auth0 ne-o ofera. Al doilea pas este sa folosim instanta noastra de axios pentru a cere datele respective sau pentru a adauga resursa. In final, pentru a citi raspunsul cererii, vom folosi then pentru a actualiza lista de carti.

Pentru 'prinderea' erorilor puteti folosi catch.

  const getAllBooks = useCallback(async () => {
    const accessToken = await getAccessTokenSilently();
    axiosInstance
      .get(routes.books.getAll, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      })
      .then(({ data }) => setBooks(data));
  }, [getAccessTokenSilently]);

  const handleAddBook = (form) => {
    (async () => {
      const accessToken = await getAccessTokenSilently();
      axiosInstance
        .post(routes.books.addBook, form, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        })
        .then(() => getAllBooks());
    })();
  };