This is an old revision of the document!
Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce o biblioteca importanta: Axios, cu care vom putea face aceasta integrare.
Cum sa interactionati cu un server, care sunt tipurile de cereri si cum sa manipulam raspunsul.
npm install axios
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 };
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. Acesti interceptori ne pot ajuta in 2 moduri:
In cazul nostru, nu a trebuit sa folosim acesti interceptori.
import axios from "axios"; import { base } from "./Api"; const axiosInstance = axios.create({ baseURL: base, timeout: 1000, }); export default axiosInstance;
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()); })(); };