El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Obteniendo Datos con Fetch API

Siguiente ►
►

En esta lección, aprenderemos cómo obtener datos de una API utilizando la Fetch API en React Native. La Fetch API es una interfaz moderna que permite realizar solicitudes HTTP de manera sencilla y eficiente.

Objetivos de Aprendizaje

  • Comprender cómo funciona la Fetch API.
  • Realizar solicitudes GET y POST.
  • Manejar respuestas y errores de red.
  • Actualizar el estado de los componentes con los datos obtenidos.

  1. Introducción a la Fetch API

La Fetch API proporciona una forma fácil y lógica de obtener recursos de forma asíncrona a través de la red. Es una mejora sobre la antigua XMLHttpRequest y es ampliamente utilizada en aplicaciones modernas.

Sintaxis Básica

fetch(url, options)
  .then(response => {
    // Manejar la respuesta
  })
  .catch(error => {
    // Manejar el error
  });
  • url: La URL del recurso que deseas obtener.
  • options: Un objeto opcional que contiene cualquier configuración personalizada que desees aplicar a la solicitud.

  1. Realizando una Solicitud GET

Vamos a realizar una solicitud GET para obtener datos de una API pública. Utilizaremos la API de JSONPlaceholder, que es una API de prueba gratuita.

Ejemplo Práctico

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  if (error) {
    return <Text>Error: {error.message}</Text>;
  }

  return (
    <View style={styles.container}>
      {data.map(item => (
        <View key={item.id} style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
          <Text>{item.body}</Text>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  item: {
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default FetchExample;

Explicación del Código

  1. Importaciones y Estado: Importamos los módulos necesarios y definimos los estados data, loading, y error.
  2. useEffect: Utilizamos useEffect para realizar la solicitud cuando el componente se monta.
  3. fetch: Realizamos la solicitud GET a la URL de la API.
  4. Manejo de Respuesta: Convertimos la respuesta a JSON y actualizamos el estado data.
  5. Manejo de Errores: Capturamos cualquier error y actualizamos el estado error.
  6. Renderizado Condicional: Mostramos un indicador de carga mientras se obtienen los datos, un mensaje de error si ocurre un error, y los datos obtenidos una vez que se completan.

  1. Realizando una Solicitud POST

Además de obtener datos, también podemos enviar datos a una API utilizando una solicitud POST.

Ejemplo Práctico

const postData = () => {
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1,
    }),
  })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.error('Error:', error));
};

Explicación del Código

  1. URL y Método: Especificamos la URL y el método POST.
  2. Headers: Definimos los headers, incluyendo el tipo de contenido.
  3. Body: Convertimos el objeto de datos a una cadena JSON.
  4. Manejo de Respuesta y Errores: Convertimos la respuesta a JSON y manejamos cualquier error.

  1. Manejo de Errores de Red

Es crucial manejar los errores de red para mejorar la experiencia del usuario y depurar problemas.

Ejemplo de Manejo de Errores

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(json => console.log(json))
  .catch(error => console.error('Fetch error:', error));

Explicación del Código

  1. Verificación de Respuesta: Verificamos si la respuesta es ok. Si no, lanzamos un error.
  2. Manejo de Errores: Capturamos y mostramos cualquier error que ocurra durante la solicitud.

Ejercicio Práctico

Ejercicio

  1. Crea una aplicación que obtenga una lista de usuarios de la API https://jsonplaceholder.typicode.com/users.
  2. Muestra los nombres de los usuarios en una lista.
  3. Maneja los estados de carga y error.

Solución

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator, StyleSheet, FlatList } from 'react-native';

const UsersList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(json => {
        setUsers(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  if (error) {
    return <Text>Error: {error.message}</Text>;
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={users}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.name}>{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  item: {
    marginBottom: 20,
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default UsersList;

Explicación del Código

  1. FlatList: Utilizamos FlatList para renderizar la lista de usuarios.
  2. keyExtractor: Especificamos una clave única para cada elemento.
  3. renderItem: Definimos cómo se renderiza cada elemento de la lista.

Conclusión

En esta lección, hemos aprendido cómo utilizar la Fetch API para obtener y enviar datos en una aplicación React Native. Hemos cubierto cómo manejar respuestas y errores, y cómo actualizar el estado del componente con los datos obtenidos. Con estos conocimientos, estás listo para interactuar con APIs en tus aplicaciones React Native.

En la próxima lección, exploraremos cómo usar Axios para realizar solicitudes HTTP, lo que ofrece una alternativa más robusta y con más características que la Fetch API.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados