React + Fetch - Ejemplos de solicitudes HTTP POST

Solicitud POST simple con un cuerpo JSON usando fetch

Esto envía una solicitud HTTP POST a la api JSONPlaceholder, que es una API REST falsa en línea que incluye una ruta /posts que responde a las solicitudes POST con el contenido del cuerpo de la publicación y una propiedad de identificación.  La identificación de la respuesta se asigna a la propiedad postId del estado del componente de reacción para que pueda mostrarse en el método render() del componente.

componentDidMount() {
    // Simple POST request with a JSON body using fetch
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
        .then(response => response.json())
        .then(data => this.setState({ postId: data.id }));
}

 

Solicitud POST usando fetch con React hooks

Esto envía la misma solicitud POST de React usando fetch, pero esta versión usa enlaces de React de un componente de función en lugar de métodos de ciclo de vida de un componente de clase React tradicional.  El gancho useEffect React reemplaza el método de ciclo de vida componentDidMount para realizar la solicitud HTTP POST cuando se carga el componente.

El segundo parámetro del gancho useEffect React es una matriz de dependencias que determina cuándo se ejecuta el gancho, pasar una matriz vacía hace que el gancho solo se ejecute una vez cuando el componente se carga por primera vez, como el método componentDidMount lifecyle en un componente de clase.  Para obtener más información sobre los ganchos de React, consulte https://reactjs.org/docs/hooks-intro.html.

useEffect(() => {
    // POST request using fetch inside useEffect React hook
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React Hooks POST Request Example' })
    };
    fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
        .then(response => response.json())
        .then(data => setPostId(data.id));

// empty dependency array means this effect will only run once (like componentDidMount in classes)
}, []);

 

Solicitud POST usando fetch con async / await

Esto envía la misma solicitud POST de React usando fetch, pero esta versión usa una función async y la expresión await javascript para esperar a que regresen las promesas (en lugar de usar el método promise then() como se indicó anteriormente).

async componentDidMount() {
    // POST request using fetch with async/await
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', requestOptions);
    const data = await response.json();
    this.setState({ postId: data.id });
}

 

Solicitud POST usando fetch con manejo de errores

Esto envía una solicitud POST de React a una URL no válida en la API, luego asigna el error a la propiedad de estado del componente errorMessage y registra el error en la consola.

La función fetch() arrojará automáticamente un error por errores de red, pero no por errores HTTP como respuestas 4xx o 5xx.  Para errores HTTP, podemos verificar la propiedad response.ok para ver si la solicitud falló y rechazar la promesa nosotros mismos llamando a return Promise.reject (error) ;.  Este enfoque significa que ambos tipos de solicitudes fallidas (errores de red y errores http) pueden manejarse con un solo bloque catch().

componentDidMount() {
    // POST request using fetch with error handling
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://jsonplaceholder.typicode.com/invalid-url', requestOptions)
        .then(async response => {
            const data = await response.json();

            // check for error response
            if (!response.ok) {
                // get error message from body or default to response status
                const error = (data && data.message) || response.status;
                return Promise.reject(error);
            }

            this.setState({ postId: data.id })
        })
        .catch(error => {
            this.setState({ errorMessage: error.toString() });
            console.error('There was an error!', error);
        });
}

 

Solicitud POST usando fetch con encabezados HTTP establecidos

Esto envía la misma solicitud POST nuevamente desde React usando fetch con un par de encabezados adicionales establecidos, el encabezado de Authorization HTTP y un encabezado personalizado My-Custom-Header.

componentDidMount() {
    // POST request using fetch with set headers
    const requestOptions = {
        method: 'POST',
        headers: { 
            'Content-Type': 'application/json',
            'Authorization': 'Bearer my-token',
            'My-Custom-Header': 'foobar'
        },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
        .then(response => response.json())
        .then(data => this.setState({ postId: data.id }));
}