004. AJAX: API Fetch + Async-Await

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();
})();