Escribir una solicitud POST usando Fetch API en React

1. Escriba una solicitud POST usando la API Fetch en React
2. Solicitud POST usando Fetch con encabezados HTTP establecidos
3. Solicitud POST usando Fetch con async/await en React
4. Solicitud POST usando Fetch con manejo de errores

Enviar y recibir datos a través de API es una característica esencial de cualquier aplicación web compleja.

React es un marco muy popular para crear aplicaciones web. Al igual que otros marcos basados en JavaScript, permite a los desarrolladores utilizar la API Fetch para comunicarse con los servidores.

Esta guía le mostrará cómo escribir una solicitud POST en React.

Escriba una solicitud POST usando la API Fetch en React

Al crear un componente de clase React, debe realizar una solicitud HTTP en los métodos de ciclo de vida. Normalmente en el método componentDidMount().

Hay un gancho useEffect() para componentes de clase funcional, que sustituye a los métodos de ciclo de vida.

La estructura de una solicitud Fetch parece fetch(endpointURL, requestOptions).

Para comprenderlo mejor, veamos un componente funcional real en React.

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    fetch(url, options);
  }, []);
  return <div className="App"></div>;
}

Demostración en vivo en CodeSandbox.

En este ejemplo, hacemos una solicitud usando el gancho useEffect(). El primer argumento del gancho es una función de devolución de llamada, donde usamos el método fetch para realizar la solicitud.

La variable url contiene la URL del extremo de la API donde queremos POST datos.

La variable opciones contiene un objeto opciones, que es un componente esencial para realizar una solicitud POST. Tiene tres propiedades: método, cabeceras, cuerpo.

El valor de la propiedad método especifica el tipo de acción que debe realizarse. En este caso, eso es 'POST', que le dice al servidor que cree un nuevo registro.

También puede tener estos valores: 'GET', 'PUT', 'PATCH', 'DELETE'.

La propiedad headers se utiliza para especificar cómo se deben manejar los datos.

Finalmente, la propiedad cuerpo contiene los datos que deben transferirse al servidor al otro lado del extremo de la API.

Solicitud POST usando Fetch con encabezados HTTP establecidos

Como ya dijimos, la propiedad headers se refiere al propósito de los datos y cómo la aplicación receptora debe manejarlos.

En nuestro ejemplo, establecemos el valor de 'application-json', que especifica que los datos deben analizarse como JSON.

Solicitud POST usando Fetch con async/await en React

En lugar de usar el método then() para encadenar promesas, muchos desarrolladores usan una sintaxis async/await más limpia. Echemos un vistazo al ejemplo.

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (e) {
        return e;
    }
    }
    getData()
  }, []);
  return <div className="App"></div>;
}

En este ejemplo, tenemos la misma url y opciones, pero reemplazamos then() y las promesas encadenadas con las palabras clave async y await.

Para reemplazar las cadenas de promesas con la palabra clave await, necesitamos usar la palabra clave async en la definición de la función.

Tenga en cuenta que no podemos usar la palabra clave async directamente con la función de devolución de llamada, que es el primer argumento del enlace useEffect(). En su lugar, definimos una nueva función, getData, dentro de la devolución de llamada y la llamamos al final de la función.

Solicitud POST usando Fetch con manejo de errores

Muchos desarrolladores cometen un error común cuando intentan realizar una solicitud POST. El error es proporcionar un valor incorrecto para el parámetro cuerpo en el objeto opciones.

El parámetro cuerpo toma un objeto de JavaScript con sus propios pares clave-valor. A menudo, los desarrolladores obtienen un error porque están pasando un objeto JavaScript sin procesar.

Si se encuentra en una situación similar y sigue recibiendo un error, intente pasar datos sin procesar como argumento al método JSON.stringify().

La forma más fácil de implementar el manejo de errores cuando se realiza una solicitud POST es usar la instrucción try...catch. Veamos la función getData del ejemplo anterior.

const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (error) {
        return error;
    }

El cuerpo de la función contiene dos bloques de código, uno debajo de la instrucción try y el otro debajo de catch.

En primer lugar, intentamos realizar la solicitud y devolver los datos. Si por alguna razón, hay un error y la solicitud no tiene éxito, JavaScript ejecutará el código en el bloque catch.

La declaración catch toma un argumento, un nombre de variable que representa lo que causó que la solicitud fallara. Podemos devolver este valor y examinar qué salió mal.

Muchos desarrolladores registran esta variable en la consola.