Fetch data | Notion

Recapitulación

<aside> 💡 En la clase pasada creamos la función fetchData que le pasabamos una URL y un callback y dependiendo de si la petición concluía correctamente nos devolvía ese callback con un error o con la petición.

</aside>

function fetchData(urlApi, callback) {
  let xhttp = new XMLHttpRequest();

  xhttp.open("GET", urlApi, true);
  xhttp.onreadystatechange = function (event) {
    if (xhttp.readyState === 4) {
      if (xhttp.status === 200) {
        callback(null, JSON.parse(xhttp.responseText)); // callback con la respuesta
      } else {
        const error = new Error("Error" + urlApi);
        return callback(error, null); // callback con el error
      }
    }
  };
  xhttp.send();
}

Haciendo uso de fetchData

Utilizamos la función fetchData pasandole la ruta de productos de la API y el callback con el parámetro de error y data.
```
fetchData(`${API}/products`, function (error1, data1) {});
```

Despues realizamos una validación para mostrar un mensaje en caso de error.

fetchData(`${API}/products`, function (error1, data1) {
	if (error1) return console.error(error1);
});

Y volvemos a usar la función fetchData pasando la ruta de un producto en específico y un callback con el error y data.

fetchData(`${API}/products`, function (error1, data1) {
  if (error1) return console.error(error1);
  fetchData(`${API}/products/${data1[0].id}`, function (error2, data2) {
	});
});

Manejamos el error y llamamos por ultima vez a fetchData.

fetchData(`${API}/products`, function (error1, data1) {
  if (error1) return console.error(error1);
  fetchData(`${API}/products/${data1[0].id}`, function (error2, data2) {
    if (error2) return console.error(error2);
    fetchData(`${API}/categories/${data2?.category?.id}`, function (error3, data3) {});
  });
});

Finalmente manejamos el error y mostramos en consola la data que devolvieron nuestras funciones.

fetchData(`${API}/products`, function (error1, data1) {
  if (error1) return console.error(error1);
  fetchData(`${API}/products/${data1[0].id}`, function (error2, data2) {
    if (error2) return console.error(error2);
    fetchData(
      `${API}/categories/${data2?.category?.id}`,
      function (error3, data3) {
        if (error3) return console.error(error3);
        console.log(data1[0]);
        console.log(data2.title);
        console.log(data3.name);
      }
    );
  });
});

Código Resultante

fetchData(`${API}/products`, function (error1, data1) {
  if (error1) return console.error(error1);
  fetchData(`${API}/products/${data1[0].id}`, function (error2, data2) {
    if (error2) return console.error(error2);
    fetchData(
      `${API}/categories/${data2?.category?.id}`,
      function (error3, data3) {
        if (error3) return console.error(error3);
        console.log(data1[0]);
        console.log(data2.title);
        console.log(data3.name);
      }
    );
  });
});

{
  id: 2,
  title: 'new Title',
  price: 100000,
  description: 'new Description',
  category: {
    id: 1,
    name: 'Clothes',
    image: '<https://api.lorem.space/image/fashion?w=640&h=480&r=425>'
  },
  images: [
    '<https://api.lorem.space/image/fashion?w=640&h=480&r=595>',
    '<https://api.lorem.space/image/fashion?w=640&h=480&r=5483>',
    '<https://api.lorem.space/image/fashion?w=640&h=480&r=4398>'
  ]
}
new Title
Clothes