El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Obtenir dades amb Fetch API

Següent ►
►

En aquest tema, aprendrem a obtenir dades d'una API externa utilitzant la Fetch API en React Native. La Fetch API és una interfície moderna que permet fer sol·licituds de xarxa de manera senzilla i eficient.

Objectius

  • Comprendre com funciona la Fetch API.
  • Aprendre a fer sol·licituds GET i POST.
  • Gestionar les respostes de les sol·licituds.
  • Manejar errors de xarxa.

  1. Introducció a la Fetch API

La Fetch API proporciona una manera fàcil i lògica de fer sol·licituds de xarxa asíncrones. És una alternativa moderna a l'antic XMLHttpRequest.

Característiques clau:

  • Basada en promeses.
  • Suporta sol·licituds GET, POST, PUT, DELETE, etc.
  • Permet gestionar respostes en format JSON, text, blob, etc.

  1. Sol·licitud GET amb Fetch API

Exemple bàsic

A continuació, es mostra un exemple bàsic de com fer una sol·licitud GET per obtenir dades d'una API:

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

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

  if (error) {
    return (
      <View style={styles.container}>
        <Text>Error: {error.message}</Text>
      </View>
    );
  }

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default FetchExample;

Explicació del codi

  1. Importacions i estat inicial:

    • Importem els components necessaris de React i React Native.
    • Definim tres estats: data per emmagatzemar les dades obtingudes, loading per gestionar l'estat de càrrega i error per gestionar els errors.

  2. useEffect:

    • Utilitzem useEffect per fer la sol·licitud GET quan el component es munta.
    • fetch fa la sol·licitud a l'URL especificada.
    • Si la resposta no és correcta (response.ok), es llança un error.
    • Si la resposta és correcta, es converteix a JSON i es guarda a l'estat data.
    • Si hi ha un error, es guarda a l'estat error.

  3. Renderització condicional:

    • Si loading és cert, es mostra un indicador de càrrega.
    • Si hi ha un error, es mostra un missatge d'error.
    • Si les dades s'han carregat correctament, es mostren les dades.

  1. Sol·licitud POST amb Fetch API

Exemple bàsic

A continuació, es mostra un exemple de com fer una sol·licitud POST per enviar dades a una API:

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

const PostExample = () => {
  const [response, setResponse] = useState(null);

  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((data) => {
        setResponse(data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

  return (
    <View style={styles.container}>
      <Button title="Enviar dades" onPress={postData} />
      {response && (
        <View>
          <Text>ID: {response.id}</Text>
          <Text>Title: {response.title}</Text>
          <Text>Body: {response.body}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default PostExample;

Explicació del codi

  1. Importacions i estat inicial:

    • Importem els components necessaris de React i React Native.
    • Definim un estat response per emmagatzemar la resposta de la sol·licitud POST.

  2. postData:

    • Definim la funció postData que es crida quan es prem el botó.
    • fetch fa la sol·licitud POST a l'URL especificada.
    • Es defineixen els headers i el body de la sol·licitud.
    • Si la sol·licitud és correcta, es converteix a JSON i es guarda a l'estat response.
    • Si hi ha un error, es mostra a la consola.

  3. Renderització:

    • Es mostra un botó que crida la funció postData quan es prem.
    • Si hi ha una resposta, es mostren les dades de la resposta.

  1. Gestió d'errors de xarxa

És important gestionar els errors de xarxa per proporcionar una millor experiència d'usuari. A continuació, es mostra com gestionar errors en una sol·licitud GET:

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then((data) => {
      setData(data);
      setLoading(false);
    })
    .catch((error) => {
      setError(error);
      setLoading(false);
    });
}, []);

Consells per gestionar errors:

  • Utilitza try...catch per gestionar errors de manera més clara.
  • Proporciona missatges d'error útils per a l'usuari.
  • Considera la possibilitat de tornar a intentar la sol·licitud en cas d'error.

Exercici pràctic

Exercici

Crea una aplicació que faci una sol·licitud GET a l'API https://jsonplaceholder.typicode.com/users i mostri una llista de noms d'usuaris.

Solució

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } 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) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

  if (error) {
    return (
      <View style={styles.container}>
        <Text>Error: {error.message}</Text>
      </View>
    );
  }

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default UsersList;

Explicació de la solució

  1. Importacions i estat inicial:

    • Importem els components necessaris de React i React Native.
    • Definim tres estats: users per emmagatzemar la llista d'usuaris, loading per gestionar l'estat de càrrega i error per gestionar els errors.

  2. useEffect:

    • Utilitzem useEffect per fer la sol·licitud GET quan el component es munta.
    • fetch fa la sol·licitud a l'URL especificada.
    • Si la resposta no és correcta (response.ok), es llança un error.
    • Si la resposta és correcta, es converteix a JSON i es guarda a l'estat users.
    • Si hi ha un error, es guarda a l'estat error.

  3. Renderització condicional:

    • Si loading és cert, es mostra un indicador de càrrega.
    • Si hi ha un error, es mostra un missatge d'error.
    • Si les dades s'han carregat correctament, es mostra una llista d'usuaris utilitzant FlatList.

Conclusió

En aquest tema, hem après a utilitzar la Fetch API per obtenir dades d'una API externa en React Native. Hem vist com fer sol·licituds GET i POST, gestionar respostes i errors de xarxa. També hem practicat aquests conceptes amb un exercici pràctic. Ara estem preparats per avançar cap a la gestió d'errors de xarxa en més profunditat i altres tècniques de sol·licitud de dades.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats