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

Utilitzar Axios per a sol·licituds HTTP

Següent ►
►

En aquest tema, aprendrem a utilitzar Axios per fer sol·licituds HTTP en una aplicació React Native. Axios és una llibreria basada en promeses que facilita la realització de sol·licituds HTTP asíncrones. És una alternativa popular a la Fetch API, ja que ofereix una sintaxi més senzilla i funcionalitats addicionals.

Continguts

  1. Instal·lació d'Axios
  2. Realitzar una sol·licitud GET
  3. Realitzar una sol·licitud POST
  4. Gestió d'errors
  5. Exercicis pràctics

Instal·lació d'Axios

Per començar a utilitzar Axios, primer hem d'instal·lar la llibreria en el nostre projecte React Native. Utilitzarem npm o yarn per fer-ho.

npm install axios

o

yarn add axios

Realitzar una sol·licitud GET

Una de les operacions més comunes és obtenir dades d'un servidor. Vegem com fer una sol·licitud GET amb Axios.

Exemple de codi

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

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

export default App;

Explicació del codi

  1. Importacions: Importem React, useEffect, useState, i components de React Native com View, Text, ActivityIndicator, i StyleSheet. També importem axios.
  2. Estat: Definim tres estats: data per emmagatzemar les dades obtingudes, loading per gestionar l'estat de càrrega, i error per gestionar els errors.
  3. useEffect: Utilitzem useEffect per fer la sol·licitud GET quan el component es munta. axios.get fa la sol·licitud i, si té èxit, actualitza data i loading. Si hi ha un error, actualitza error i loading.
  4. Renderització condicional: Mentre loading és true, mostrem un ActivityIndicator. Si hi ha un error, mostrem un missatge d'error. Si tot va bé, mostrem les dades obtingudes.

Realitzar una sol·licitud POST

Les sol·licituds POST s'utilitzen per enviar dades a un servidor. Vegem com fer una sol·licitud POST amb Axios.

Exemple de codi

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);

  const handleSubmit = () => {
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: title,
      body: body,
      userId: 1,
    })
    .then(response => {
      setResponse(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Title"
        value={title}
        onChangeText={setTitle}
      />
      <TextInput
        style={styles.input}
        placeholder="Body"
        value={body}
        onChangeText={setBody}
      />
      <Button title="Submit" onPress={handleSubmit} />
      {response && (
        <View style={styles.responseContainer}>
          <Text style={styles.responseTitle}>Response:</Text>
          <Text>{JSON.stringify(response, null, 2)}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
  },
  responseContainer: {
    marginTop: 20,
  },
  responseTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;

Explicació del codi

  1. Estat: Definim tres estats: title i body per emmagatzemar les dades del formulari, i response per emmagatzemar la resposta del servidor.
  2. handleSubmit: Aquesta funció es crida quan l'usuari prem el botó "Submit". Fa una sol·licitud POST amb axios.post, enviant title, body, i userId al servidor. Si la sol·licitud té èxit, actualitza response amb les dades de la resposta.
  3. Renderització: Mostrem dos TextInput per recollir title i body, un Button per enviar les dades, i, si hi ha una resposta, la mostrem en un View.

Gestió d'errors

És important gestionar els errors quan es fan sol·licituds HTTP. Vegem com fer-ho amb Axios.

Exemple de codi

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // El servidor va respondre amb un codi d'estat fora del rang 2xx
      console.error('Error data:', error.response.data);
      console.error('Error status:', error.response.status);
      console.error('Error headers:', error.response.headers);
    } else if (error.request) {
      // La sol·licitud es va fer però no es va rebre cap resposta
      console.error('Error request:', error.request);
    } else {
      // Alguna cosa va passar en configurar la sol·licitud que va provocar un error
      console.error('Error message:', error.message);
    }
    console.error('Error config:', error.config);
  });

Explicació del codi

  1. error.response: Si el servidor respon amb un codi d'estat fora del rang 2xx, podem accedir a error.response per obtenir més informació sobre l'error.
  2. error.request: Si la sol·licitud es va fer però no es va rebre cap resposta, error.request contindrà la sol·licitud que es va fer.
  3. error.message: Si alguna cosa va passar en configurar la sol·licitud que va provocar un error, error.message contindrà el missatge d'error.
  4. error.config: error.config conté la configuració de la sol·licitud que es va fer.

Exercicis pràctics

Exercici 1: Sol·licitud GET

Crea una aplicació que faci una sol·licitud GET a l'API de JSONPlaceholder per obtenir una llista de publicacions i mostri els títols en una llista.

Exercici 2: Sol·licitud POST

Crea una aplicació que permeti a l'usuari enviar una nova publicació a l'API de JSONPlaceholder mitjançant una sol·licitud POST. Mostra la resposta del servidor a l'usuari.

Solucions

Solució Exercici 1

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

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        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={data}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
  },
});

export default App;

Solució Exercici 2

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);

  const handleSubmit = () => {
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: title,
      body: body,
      userId: 1,
    })
    .then(response => {
      setResponse(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Title"
        value={title}
        onChangeText={setTitle}
      />
      <TextInput
        style={styles.input}
        placeholder="Body"
        value={body}
        onChangeText={setBody}
      />
      <Button title="Submit" onPress={handleSubmit} />
      {response && (
        <View style={styles.responseContainer}>
          <Text style={styles.responseTitle}>Response:</Text>
          <Text>{JSON.stringify(response, null, 2)}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
  },
  responseContainer: {
    marginTop: 20,
  },
  responseTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;

Conclusió

En aquest tema, hem après a utilitzar Axios per fer sol·licituds HTTP en una aplicació React Native. Hem vist com fer sol·licituds GET i POST, com gestionar errors i hem practicat amb exercicis pràctics. Ara estem preparats per integrar Axios en les nostres aplicacions per gestionar la comunicació amb APIs de manera eficient.

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