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';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  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('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

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/Banner.ts

export type Banner = {
    _id: string;
    href: string;
    endDate: string;
    position: {
        width: number;
        height: number;
    }
}

src/apiClient.ts

import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { Banner } from "./types/Banner";
import apiClient from "./api/apiClient";

function App() {
const [data, setData] = useState(Array<Banner>);

useEffect(() => {
    apiClient
    .get("/banners/szeged")
    .then((response) => {
        setData(response.data);
    })
    .catch((error) => {
        console.error(error);
    });
}, []);

return (
    <div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
    </header>
    <table>
        <th>ID</th>
        <th>endDate</th>
        <th>Href</th>
        <th>width</th>
        <th>height</th>
        {data.map((sz) =>
        <tr>
            <td>{sz._id}</td>
            <td>{sz.endDate}</td>
            <td>{sz.href}</td>
            <td>{sz.position.width}</td>
            <td>{sz.position.height}</td>
        </tr>
        )}
    </table>
    </div>
);
}

export default App;

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;

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);
  });