En este capítulo hacemos el mismo ejercicio que en el capítulo anterior pero con las funciones asíncronas, veamos la sintaxis de los dos archivos que hemos de crear, peticionesasincronas.html y peticionesasincronas.js.
Sintaxis de peticionesasincronas.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Peticiones asíncronas</title> </head> <body> <h1>Ajax</h1> <h2>Peticiones asíncronas</h2> <ol id="fetch-async"></ol> <script src="./03peticionesasincronas.js"></script> </body> </html>
Sintaxis de peticionesasincronas.js.
(() => {
const $fetchAsync = document.getElementById("fetch-async"),
$fragment = document.createDocumentFragment();
async function getData() {
try {
let res = await fetch("https://jsonplaceholder.typicode.com/user"),
json = await res.json();
if (!res.ok)
throw {
status: res.status,
statusText: res.statusText,
};
json.forEach((el) => {
const $li = document.createElement("li");
$li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
$fragment.appendChild($li);
});
$fetchAsync.appendChild($fragment);
} catch (err) {
let message = err.statusText || "Ocurrió un error";
$fetchAsync.innerHTML = `Error ${err.status}: ${message}`;
} finally {
console.log(
"Lo que está en finally se ejecuta independientemente del try catch"
);
}
}
getData();
})();