itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-3696 page-child parent-pageid-3625 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

005. AJAX: Librería Axios

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"
      );
    });
})();
Scroll al inicio