Axios #

Telepítése #

NPM segítségével lehet a legegyszerűbben felhasználni:

npm i axios

Amennyiben hagyományos ES projekthez eszertnénk használni, abban az esetben a HTML-ben a <script>-ünk elé kell elhelyezni a köveztkezőt:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Kérések felépítse #

Alapvetően az axios egy XHR műveletet fog a háttérben végezni. Ennek során előre összeállított konfigurációból dologozik. A kérések során továbbá az adatok konvertálásával sem kell foglalkozni, ugyanis beépítetten végzi azt el. Sőt szemben a fetch-el a Laravel biztsonsági előírásait is tudja kezelni, mint például a CSRF token.

Az axios használatához először importálnunk kell azt.

import axios from "axios";

Ezt követően az axios-on a kérés típusának megfelelő függvényt fogjuk meghívni. Ezekre az alábbiakban látunk egy-egy példát:

GET #

async getData(){
  const response = await axios.get('https://kedvenchelyem.tld/api');
  return response;
}

POST #

async createData(data){
  const response = await axios.post('https://kedvenchelyem.tld/api',data);
  return response;
}

PUT #

async modifyData(id,data){
  const response = await axios.put(`https://kedvenchelyem.tld/api/${id}`,data);
  return response;
}

DELETE #

async deleteData(id){
  const response = await axios.delete(`https://kedvenchelyem.tld/api/${id}`);
  return response;
}

Válaszok feléíptése #

A válaszokban egy objectet kapunk, amely a következő adatokat tárolja:

Saját példány #

Lehetőségünk van arra, hogy létrehozzunk egy saját példányt is, amelynek előre megadhatjuk a konfigurációt. Ezt az axios.create() segítségével tudjuk megtenni, és általában célszerű külön madulba szervezni annak érdekében, hogy több fájl számára is elérhetővé váljon.

//http.mjs
import axios from 'axios';

export default const http = axios.create({
  baseURL: "https://kedvenchelyem.tld",
  headers: {'Authorization': 'Bearer my_token'}
});

Bármilyen alap konfigot megadhatunk neki amit szeretnénk, ha alapértelmezetten minden kérés tudna kezelni, ilyen például a baseURL, aminek megadása után már csak az url megfelelő részét kell függvényhíváskor.

Pl:

import {http} from "./http.mjs"

async getData(){
  const response = await http.get("api");
  return response;
}

Interceptors #

Ellenőrző kérdések #

\pagebreak