{"id":1658,"date":"2024-08-02T10:58:19","date_gmt":"2024-08-02T08:58:19","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1658"},"modified":"2024-08-02T10:58:20","modified_gmt":"2024-08-02T08:58:20","slug":"004-helper-de-peticiones-ajax","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/18-single-page-application-spa\/004-helper-de-peticiones-ajax\/","title":{"rendered":"004. Helper de peticiones AJAX"},"content":{"rendered":"\n

En el cap\u00edtulo anterior cre\u00e1bamos las constantes<\/strong> que vamos a utilizar para conectarnos al sitio del cual vamos a consumir la informaci\u00f3n para nuestro SPA<\/strong>. El consumo de los datos de una p\u00e1gina hecha en WordPress<\/strong> lo haremos a trav\u00e9s de Fetch<\/strong>, para lo cual vamos a crear un helper<\/strong> que nos ayude a procesar de mejor forma las peticiones as\u00edncronas<\/strong> con la funci\u00f3n fetch()<\/em><\/strong>. Crearemos por lo tanto un archivo denominado ajax.js<\/em> dentro de la carpeta helpers<\/em>, que tendr\u00e1 la siguiente sintaxis<\/p>\n\n\n\n\n\n\n\n

export function ajax(props) {\n  let { url, cbSuccess } = props;\n\n  fetch(url)\n    .then((res) => (res.ok ? res.json() : Promise.reject(res)))\n    .then((json) => cbSuccess(json))\n    .catch((err) => {\n      let message = err.statusText | \"Ocurri\u00f3 un error al acceder a la API\";\n      document.getElementById(\"root\").innerHTML = `\n            <div class=\"error\">\n                <p>Error ${err.status}: ${message}<\/p>\n            <\/div>\n            `;\n      console.log(err);\n    });\n}<\/pre>\n\n\n\n
Tambi\u00e9n modificaremos el archivo App.js<\/em>, que contendr\u00e1 la siguiente sintaxis.<\/p>\n\n\n\n
import api from \".\/helpers\/wp-api.js\";\nimport { ajax } from \".\/helpers\/ajax.js\";\n\nexport function App() {\n  document.getElementById(\n    \"root\"\n  ).innerHTML = `<h1>Bienvenidos a mi primer SPA con Vanilla Javascript<\/h1>`;\n\n  ajax({\n    url: api.POST,\n    cbSuccess: (posts) => {\n      console.log(posts);\n    },\n  });\n}\n\nconsole.log(api);<\/pre>\n\n\n\n
Esquema<\/h2>\n\n\n\n