1

Estoy haciendo un ejercicio practico para probar mis habilidades en Javascript en FETCH combinado con Async/ Await. El trabajo consiste en que a traves de la pagina principal se pueda acceder a las demás paginas sin necesidad de abrir otra pestaña sino que en la misma pagina cargue (Como si de un TAB se tratara).

Ya lo realice sin embargo no se si pueda optimizar de alguna manera, intente haciendo un método aparte que pudiera recibir las opciones y no colocarlo directamente en el try pero no pude. Agradezco sus comentarios.

Las paginas las tengo guardadas en una carpeta llamada assets, solamente tiene un texto , una imagen y un titulo diferente.

El main

<header>
 <div class="header-content container">
 <div class="logo">
        <img src="img/kEnAi.svg" alt="" class="nav-logo">
 </div>
<nav class="main-nav">
 <ul class="list">
  <li class="items"><a href="assets/home.html" class="link">Home</a></li>
  <li class="items"><a href="assets/acerca.html" class="link">Acerca</a></li>
  <li class="items"><a href="assets/servicios.html" class="link">Servicios</a></li>
  <li class="items"><a href="assets/contacto.html" class="link">Contacto</a></li>
</ul> 
</div>
</header>

<main class="container"></main>
<footer class="footer container">
    <small>Footer prueba</small>
</footer>

SCRIPT

const d = document;
const $main = d.querySelector("main");

//CARGO LA PAGINA PRINCIPAL DEL MAIN
d.addEventListener("DOMContentLoaded",getHTML);

// METODO PARA CARGAR LA PAGINA PRINCIPAL
const getHTML = async () => {
try {
    let res = await fetch("assets/home.html");
    let data = await res.text();
    if(!res.ok) throw {status:res,statusText:res.statusText};
    console.log(data);
    $main.innerHTML = data;
} catch (error) {
  console.log(err);
  let message = err.statusText || "Ocurrio un error";
} finally{
    console.log("Mensaje prueba");
}
}

//METODO PARA CARGAR LA PAGINA DEPENDIENDO DE LA OPCION QUE ESCOJA
d.addEventListener('click',async e=> {
if(e.target.matches(".link")){
    e.preventDefault();
    try{  
      let options = {
          method: "GET",
          headers: {
              "Content-type": "text/html; charset=utf-8"
          },  
      }, 
      res = await fetch(`${e.target.href}`),
      data = await res.text();
      if(!res.ok) throw {status:res.status,statusText:res.statusText};
      $main.innerHTML = data;
    } catch (err){
        let message = err.statusText || "Ocurrio un error";
        console.log(message);
    }
}
})

1 respuesta 1

1

Solo necesitas una función para cargar cualquier página, recibiendo la URL como parámetro y, al escuchar clics en el documento, verifica que se trata de un enlace, propiedad .tagName y que contiene la clase deseada .classList.contains('nombre-de-clase') para ejecutar la misma función.

const d = document;
const main = d.querySelector("main");

// Método para cargar cualquier página
const getHTML = async (url) => {
    console.log(url);
    try {
        let res = await fetch(url);
        // Aquí es donde deberías revisar res.ok, antes de obtener los datos
        if(!res.ok) {
            throw {status: res.status, statusText: res.statusText};
        }
        let data = await res.text();
        main.innerHTML = data;
    } catch (err) {
        console.log('Error:', err);
        let message = err.statusText || "Ocurrio un error";
    }
}

// Obtener contenido de página principal al cargar el dom
d.addEventListener("DOMContentLoaded", () => getHTML('assets/home.html'));

// Escuchar clics en documento y analizar para cargar contenido
d.addEventListener('click', e => {
    // Verificar que se trata de un enlace y tiene la clase link
    if(e.target.tagName == 'A' && e.target.classList.contains('link')) {
        // Cancelar evento
        e.preventDefault();
        // Cargar contenido, enviando solo URL del enlace
        getHTML(e.target.href);
    }
});
1
  • Sabia que se podia acortar mas pero nunca espere que fuera tanto!!!muchisimas gracias por la ayuda !!
    – guest
    el 20 jul. 2021 a las 21:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.