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;