La librería Axios es una librería de terceros basada en promesas que nos puede ayudar mucho a la hora de hacer peticiones Ajax. Internamente hay algunos Frameworks que recomiendan usar esta librería para hacer peticiones vía Ajax.
Axios puede recibir un objeto donde nosotros le especifiquemos la URL, el método por el que estamos haciendo el envío. La API de Axios es muy similar a la API nativa de Fetch.
Veamos la sintaxis del ejercicios que vamos a realizar en este capítulo para entender el funcionamiento de Axios, seguiremos tomando como ejm el de los tres capítulos anteriores. Veamos la sintaxis de los dos archivos que vamos a generar, llamados axios.html y axios.js.
Sintaxis de axios.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Librería Axios</title>
</head>
<body>
<h1>Ajax</h1>
<h2>Librería Axios</h2>
<ol id="axios"></ol>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./04axios.js"></script>
</body>
</html>
Sintaxis de axios.js.
(() => {
const $axios = document.getElementById("axios"),
$fragment = document.createDocumentFragment();
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((res) => {
let json = res.data;
json.forEach((el) => {
const $li = document.createElement("li");
$li.innerHTML = `${el.name} --- ${el.email} --- ${el.phone}`;
$fragment.appendChild($li);
});
$axios.appendChild($fragment);
})
.catch((err) => {
let message = err.response.statusText || "Ocurrió un error";
$axios.innerHTML = `Error ${err.response.status} ${message}`;
})
.finally(() => {
console.log(
"Esto se ejecutará independientemente del resultado de Axios"
);
});
})();