En este capítulo vamos a seguir utilizando Axios , pero esta vez utilizando funciones asíncronas, vamos a tener dos archivos, axiosasincrono.html y axiosasincrono.js. Veamos la sintaxis.
Sintaxis de axiosasincrono.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Axios asíncrono</title> </head> <body> <h1>Ajax</h1> <h2>Axios asíncrono</h2> <ol id="axios-async"></ol> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="./05axiosasincronos.js"></script> </body> </html>
Sintaxis de axiosasincrono.js.
(() => {
const $axiosAsync = document.getElementById("axios-async"),
$fragment = document.createDocumentFragment();
async function getData() {
try {
let res = await axios.get("https://jsonplaceholder.typicode.com/users"),
json = await res.data;
json.forEach((el) => {
const $li = document.createElement("li");
$li.innerHTML = `${el.name} --- ${el.email} --- ${el.phone}`;
$fragment.appendChild($li);
});
$axiosAsync.appendChild($fragment);
console.log(res, json);
} catch (err) {
let message = err.response.statusText || "Ocurrió un error";
$axiosAsync.innerHTML = `Error ${err.response.status} ${message}`;
} finally {
console.log("Esto se ejecuta independendientemente del try y catch");
}
}
getData();
})();