Axios

Az Axios egy HTTP kliens, amely lehetővé teszi az aszinkron kérések küldését a böngészőből. Az Axios egy Promise-alapú API-t használ, amely lehetővé teszi a könnyű használatot a böngészőben és a Node.js környezetben is.

Telepítés

Telepítsd az Axios-t a következő paranccsal:

npm install axios

Használat

React projekt esetén hozzunk létre az src mappában belül egy apiClient.ts fájlt, és írjuk bele az alábbi kódot:

import axios from "axios";

export const BACKEND_URL = "http://localhost:8001/api";

const apiClient = axios.create({
  baseURL: BACKEND_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default apiClient;

A továbbiakban amikor használjuk az Axios-t, importáljuk az apiClient.ts fájlt, és használjuk az Axios metódusait. Így elkerülhető, hogy minden esetben meg kelljen adnunk a teljes URL-t és a fejlécet, továbbá könnyen módosíthatjuk az alap URL-t. Autenfikáció esetén a headers objektumhoz hozzáadhatjuk az autentikációs adatokat is, így ezeket sem kell minden egyes kérésnél megadnunk.

CRUD

A CRUD műveletek (Create, Read, Update, Delete) megvalósításához az Axios post, get, put és delete metódusait használhatjuk.

GET kérés

GET kérés esetén használjuk az Axios get metódusát, amely egy Promise-t ad vissza. Ehhez felhasználjuk az apiClient objektumot, amelyet korábban létrehoztunk, így már csak a konkrét végpontot kell megadnunk, a többit az apiClient objektum kezeli.

apiClient
  .get("/pizzak")
  .then((response) => setPizzak(response.data))
  .catch((reason) => alert(reason));

Komplett példa

Kérjük ki az összes bannert az alábbi endpointról, majd jelenítsük meg!

Első lépésben csináljuk meg a típusát az új objektumnak, amit a backend vissza fog majd adni.

src/types/Pizza.ts

export type Pizza = {
    nev: string;
    leiras: string;
    ar: number;
    imageUrl: string;
    id: number;
};

src/App.tsx

import { useEffect, useState } from "react";
import "./App.css";
import apiClient, { BACKEND_URL } from "./api/apiClient";
import type { Pizza } from "./types/Pizza";

function App() {
const [pizzak, setPizzak] = useState<Array<Pizza>>([]);

useEffect(() => {
    apiClient
    .get("/pizzak")
    .then((response) => setPizzak(response.data))
    .catch((reason) => alert(reason));
}, []);

return (
    <>
    {pizzak.map((p) => (
        <p>
        {p.nev}
        <img src={`${BACKEND_URL}/kepek/${p.imageUrl}`} width={300} />
        </p>
    ))}
    </>
);
}

export default App;

VSC

POST kérés

A post kérés segítségével új adatokat küldhetünk a szervernek. Az előzőekben elkészített típusunkat használjuk, hogy a backend megfelelően tudja kezelni az adatokat.

const user = {
  name: "John Doe",
  email: "[email protected]",
} as User;

apiClient
  .post("/users", user)
  .then((response) => {
    switch (response.status) {
      case 201:
        console.log("User created successfully");
        break;
      case 400:
        console.error("Bad request");
        break;
      default:
        console.error("An error occurred");
    }
  })
  .catch((error) => {
    console.error(error);
  });

PUT kérés

A put kérés segítségével módosíthatjuk az adatokat a szerveren.

Itt két dologra kell figyelnünk:

1. Az ID-t, amely alapján azonosítjuk az adatot.
2. Az adatokat, amelyeket módosítani szeretnénk.

const user = {
  name: "John Doe",
  email: "[email protected]",
} as User;

const id = 1; // például az ID, amely alapján azonosítjuk az adatot

apiClient
  .put(`/users/${id}`, user)
  .then((response) => {
    switch (response.status) {
      case 200:
        console.log("User updated successfully");
        break;
      case 400:
        console.error("Bad request");
        break;
      default:
        console.error("An error occurred");
    }
  })
  .catch((error) => {
    console.error(error);
  });

DELETE kérés

A delete kérés segítségével törölhetjük az adatokat a szerverről. Ebben az esetben csak az ID-t kell megadnunk, amely alapján azonosítjuk az adatot.

const id = 1;

apiClient
  .delete(`/users/${id}`)
  .then((response) => {
    switch (response.status) {
      case 204:
        console.log("User deleted successfully");
        break;
      case 400:
        console.error("Bad request");
        break;
      default:
        console.error("An error occurred");
    }
  })
  .catch((error) => {
    console.error(error);
  });

Basic autentikáció

Az Axios segítségével egyszerűen megvalósítható a basic autentikáció. A basic autentikációhoz során minden alkalommal el kell küldenünk a felhasználónevet és a jelszót a szervernek.

Példa

axios
  .get("http://localhost:8001/api/rendelesek", {
    auth: {
      username: "admin",
      password: "12345",
    },
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

Példa API

docker-compose.yml

docker-compose.yml

services:
  backend:
    container_name: kr-backend
    image: ghcr.io/rkorom/sampleapis:latest
    restart: "always"
    ports:
      - "3000:3000"
      - "8000:8000"
      - "8001:8001"
      - "8002:8002"
      - "8003:8003"
      - "8004:8004"
      - "8005:8005"
    labels:
      - "com.centurylinklabs.watchtower.enable=true"
  watchtower:
    container_name: kr-watchtower
    image: containrrr/watchtower:latest
    restart: "always"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    environment:
      WATCHTOWER_CLEANUP: "true"
      WATCHTOWER_POLL_INTERVAL: "300" # seconds
    command: --label-enable

Konténer indítása

docker-compose up -d