Haciendo llamadas API con Axios en React Native

Si queremos hacer una llamada GET, POST, PUT o DELETE a una API endpoint, podemos hacerlo en React Native usando Axios. Para lo cual somo siempre, lo primero es instalarlo:

npm install axios

Y  después importarlo:

import axios from "axios";

Para hacer una llamada GET axios se configura de esta forma:

const getBlogPosts = async () => {
try {
axios
.get("URL")
.then(response => {
const posts = response.data;
setPosts(posts);
})
.catch(function(error) {
console.log(error);
});
} catch (error) {
console.log(err);
}
};

En este ejemplo hacemos llamada al endpoint y el resultado lo guardamos en el state usando el hook useState. La forma en que podría funcionar esta función es colocarla dentro de un hook useEffect para que se ejecute cada que se cargue el componente, para jalar los nuevos posts:

 useEffect(() => {
getBlogPosts();
const listener = navigation.addListener("didFocus", () => {
getBlogPosts();
});
return () => {
listener.remove();
};
}, []);

Para hacer una petición POST, Axios se configura de la siguiente manera:

 axios({
method: "post",
url: "URL",
data: bodyFormData,
config: { headers: { "Content-Type": "multipart/form-data" } }
})
.then(response => {
callback();
})
.catch(function(error) {
console.log("hay error en el catch de axios");
});
};

Habiendo llenado bodyFormData con la información de los inputs que estemos usando.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s