Dans cette procédure, je vais vous expliquer comment contacter une API avec React Native. Avec React Native il est possible de contacter une API de deux manières différentes (De manière native ou avec Axios), dans cette procédure je vais vous montrer la méthode avec Axios.
Prérequis :
- Une application React Native (React Native créer un projet)
- Avoir NPM
Contacter une API avec React Native et Axios
Avant de contacter l’API dans notre projet, nous allons d’abord importer Axios à l’aide de NPM:
npm i axios
Ensuite une fois qu’Axios a été importé dans la librairie, nous allons nous rendre dans le fichier où nous souhaitons faire nôtre requête API.
Nous allons créer une méthode Asynchrone qui va retourner les données de la requête :
import axios from 'axios';
import React, { useEffect } from 'react';
import { View } from 'react-native';
export default function Test() {
const fetchApiDatas = async () => {
const data = await axios.get('http://localhost:8000/api/resources')
.then((response) => {
console.log(response)
return response.data;
});
console.log(data);
}
useEffect(() => {
fetchApiDatas();
}, [])
return (
<View>
</View>
);
};
Il est toute fois possible d’ajouter des données dans la requête ou des headers personnalisés :
import axios from 'axios';
import React, { useEffect } from 'react';
import { View } from 'react-native';
export default function Test() {
const fetchApiDatas = async () => {
const jwtToken = 'fakeToken';
const config = {
headers: {
Accept: 'application/json',
Authorization: 'Bearer ' + jwtToken,
}
}
const data = await axios.get('http://localhost:8000/api/resources', config)
.then((response) => {
console.log(response)
return response.data;
});
console.log(data);
}
useEffect(() => {
fetchApiDatas();
}, [])
return (
<View>
</View>
);
};
Il est également possible d’envoyer des données dans les requètes POST / PUT et PATCH de la manière suivantes :
import axios from 'axios';
import React, { useEffect } from 'react';
import { View } from 'react-native';
export default function Test() {
const fetchApiDatas = async () => {
const jwtToken = 'fakeToken';
const config = {
headers: {
Accept: 'application/json',
Authorization: 'Bearer ' + jwtToken,
}
}
const dataParams = {
"name": "test",
"description": "test",
"url": "test",
"type": "test",
"category": "test",
}
const data = await axios.post('http://localhost:8000/api/resources', dataParams, config)
.then((response) => {
console.log(response)
return response.data;
});
console.log(data);
}
useEffect(() => {
fetchApiDatas();
}, [])
return (
<View>
</View>
);
};
Sources :
https://axios-http.com/docs/intro