Backend y debug en React

Backend y debug en React

Las formas más habituales de comunicarnos con backend en React son axios o fetch. Tanto axios como fetch están basados en promesas.

#react

Fetch

fetch es una API que nos provee de una serie de recursos para poder comunicarnos con el backend, es decir, para poder hacer peticiones a un servidor.

¿Cómo nos comunicamos con fetch?

En primer lugar necesitamos un endpoint al que llamar, y luego una serie de opciones:

const url = "https://myapi.com/user";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({ name: "John", surname: "Williams" }),
};

fetch(url, options).then((response) => console.log(response.status));

En fetch no tenemos una transformación directa a JSON, por lo que tendremos que convertir la respuesta para poder manejarla.

fetch("https://myapi.com/user")
  .then(function (response) {
    // Convertimos a JSON
    return response.json();
  })
  .then(function (j) {
    // `j` es ya un objeto JavaScript 😄
    console.log(j);
  });

Puedes leer una guía completa acerca de fetch API aquí

Axios

axios es un cliente http basado en promesas que normalmente es usado con React, lo que podemos hacer es comunicarnos con el servidor, además de proporcionarnos las siguientes características:

Para instalarlo podemos ejecutar el siguiente comando en terminal:

npm install axios --save

o

yarn add axios

¿Cómo nos comunicamos con axios?

const options = {
  url: "https://myapi.com/user",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({ name: "John", surname: "Williams" }),
};

axios(options).then((response) => console.log(response.status));

Diferencias entre axios y fetch

Soporte

Timeouts

const controller = new AbortController();
const options = {
  method: "POST",
  signal: controller.signal,
  body: JSON.stringify({ firstName: "David", lastName: "Pollock" }),
};
const promise = fetch("/login", options);
const timeoutId = setTimeout(() => controller.abort(), 4000);

promise
  .then((response) => console.log(response))
  .catch((error) => console.error(error));
axios({
  method: "post",
  url: "/login",
  timeout: 4000, // 4 segundos de timeout
  data: { firstName: "David", lastName: "Pollock" },
})
  .then((response) => console.log(response))
  .catch((error) => console.error("timeut exceeded"));

Transformación automática a JSON

fetch("https://myapi.com/profile")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
axios.get("https://myapi.com/profile").then(
  (response) => {
    console.log(response.data);
  },
  (error) => {
    console.error(error);
  }
);

Interceptores

axios.interceptors.request.use((config) => {
  config.header["key"] = "example";
  return config;
});

axios.interceptors.response.use((res) => {
  console.log(res.data);
  return res;
});
const instance = axios.create({
  baseURL: "https://myapi.com",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

instance.get(...)

Barra de progreso

Uso en React

Antes de empezar a consumir datos en nuestra aplicación, sería recomendable tener instalado lo siguiente:

Consumo de datos

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const HelpDetail = (props) => {
  const params = useParams();
  const [helpData, setHelpData] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    axios
      .get(`http://localhost:4000/help/${params.name}`)
      .then((res) => {
        setHelpData(res.data.data);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [params.name]);

  return (
    <div>
      <h3>{params.name}</h3>
      <p>{loading && "The info is loading"}</p>
      <p>{!loading && helpData}</p>
    </div>
  );
};

export default HelpDetail;
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const AllergenDetail = (props) => {
  const params = useParams();
  const [allergenData, setAllergenData] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    axios
      .get(`http://localhost:4000/allergen/${params.name}`)
      .then((res) => {
        setAllergenData(res.data.data);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [params.name]);
  return (
    <div>
      <h1>{params.name}</h1>
      <p>{loading && "The info is loading"}</p>
      <p>{!loading && allergenData}</p>
    </div>
  );
};

export default AllergenDetail;

❤️ Espero que te haya gustado la entrada.

Congrats! 🎊 has llegado al final de esta guía.