Axios 23.11.20

Telepítése

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

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 function getData(){
  const response = await axios.get('https://kedvenchelyem.tld/api');
  return response;
}

POST

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

PUT

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

DELETE

async function 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 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 function getData(){
  const response = await http.get("api");
  return response;
}

Interceptors

\pagebreak