004. Helper de peticiones AJAX

En el capítulo anterior creábamos las constantes que vamos a utilizar para conectarnos al sitio del cual vamos a consumir la información para nuestro SPA. El consumo de los datos de una página hecha en WordPress lo haremos a través de Fetch, para lo cual vamos a crear un helper que nos ayude a procesar de mejor forma las peticiones asíncronas con la función fetch(). Crearemos por lo tanto un archivo denominado ajax.js dentro de la carpeta helpers, que tendrá la siguiente sintaxis

export function ajax(props) {
  let { url, cbSuccess } = props;

  fetch(url)
    .then((res) => (res.ok ? res.json() : Promise.reject(res)))
    .then((json) => cbSuccess(json))
    .catch((err) => {
      let message = err.statusText | "Ocurrió un error al acceder a la API";
      document.getElementById("root").innerHTML = `
            <div class="error">
                <p>Error ${err.status}: ${message}</p>
            </div>
            `;
      console.log(err);
    });
}

También modificaremos el archivo App.js, que contendrá la siguiente sintaxis.

import api from "./helpers/wp-api.js";
import { ajax } from "./helpers/ajax.js";

export function App() {
  document.getElementById(
    "root"
  ).innerHTML = `<h1>Bienvenidos a mi primer SPA con Vanilla Javascript</h1>`;

  ajax({
    url: api.POST,
    cbSuccess: (posts) => {
      console.log(posts);
    },
  });
}

console.log(api);

Esquema

  • index.html
  • app
    • assets
      • favicon.png
      • loader.svg
      • style.css
    • components
    • helpers
      • ajax.js
      • wp-api.js
    • App.js
    • index.js

Archivos

Estos son los archivos hasta la fecha:

Scroll al inicio