2.1.0 • Published 2 years ago
woopear-fetch-service v2.1.0
Fetch service
package qui fournis une fonction de requête api, dédié pour le front
il utilise fetch JS bibliothèque.
simple d'utilisation, avec prise en chargeawait
ettypescript
Fonctionnement d'utilisation
- exemple d'utilisation de la fonction :
callApi
NOTE : l'objet retourner par la fonction est deja pret à l'emploi
EX : response.propriete => fonctionne, pas besoin de parse ou autre formatage.
// les imports
import { callApi, headersSample } from 'woopear-fetch-service';
import { EMethodeFetch } from 'woopear-fetch-service';
// creation de votre interface objet
interface ICar {
id?: string;
engine: string;
nbDoor: string;
energy: string;
}
// utilisation de la fonction callApi
// ici on recupere une liste de Car
const response = await callApi<ICar[]>(
'my-url/car',
EMethodeFetch.GET,
headersSample()
);
console.log(response);
// output
/* response : [
...
{
id: '4f6sd45f6sd5f4sd5f',
engine: 'v8 bi-turbo',
nbDoor: '5',
energy: 'essence'
}
...
]
*/
- description : callApi(url, method, data?, headers?): Promise
// url => votre url d'api, vous pouvez combiner avec les points de terminaison
// ex : `${urlBase}/${endpoint}/${id}`
// methode => pour facilité l'utilisation l'enum EMethodeFetch existe pour vous dans le package
// ex : import { EMethodeFetch } from 'woopear-fetch-service';
/* contenue :
enum EMethodeFetch {
POST = 'POST',
PUT = 'PUT',
GET = 'GET',
PATCH = 'PATCH',
DELETE = 'DELETE',
}
*/
// choisissez votre methode
// headers => voir la description de la fonction headerSample() ci-dessous
// data? => argument optionnel, doit contenir les datas que vous souhaitez envoyer
// pas besoin de stringify la fonction le fait pour vous, envoyer l'objet tel quel
// optionnel, car si vous avez des requetes GET, vous n'aurez pas besoin de cette argument
callApi: async function <T>(
url: string,
method: EMethodeFetch,
data?,
header: HeadersInit = {},
): Promise<T> {
const response: T = await (
await fetch(url, this.configRequest(method, header, data))
).json();
return response;
},
- description : headersSample(): HeadersInit
headersSample: function (): HeadersInit {
return {
accept: 'application/json',
'Content-Type': 'application/json',
};
},
fonction
headersSample()
renvoie un header pré-formater
de base il contientaccept: 'application/json'
'Content-Type': 'application/json'
woopear travail sur le sujet afin de permettre un parametrage en global
cela permettra d'avoir quelque chose de customisable
il est possible toute fois de combiner cette fonction dans un nouvel objet
avec vos parametres supplémentaires