Je construis une application dans React.js avec beaucoup d'opérations de «CRUD». Je suis débutant dans réagit. Pour toutes ces extratures, il y a toujours la même en-tête (type de contenu, jeton ...). Et pour chaque demande, je dois résoudre les promesses, tester le statut de code, analyser la réponse, gérer les erreurs, etc. Il est très long d'écrire.
Je me demande si possible de construire une fonction générique. Quelque chose comme ça: et c'est tout! La fonction Callapi ferait tout le nécessaire (ajouter les en-têtes, le jeton, etc ....). J'ai essayé de mon côté, mais je n'ai pas assez de compétences pour le faire en réagissant. Faites-vous vos extratures avec un package spécial? Ou écrivez-vous, comme moi, vos extratures et trop mal, il est long d'écrire. Avez-vous des forfaits à suggérer?
3 Réponses :
J'utilise en utilisant Axios Créer : P> axios code> pour récupérer des API de repos. Vous pouvez utiliser axios.create code> pour créer une instance que vous pouvez transmettre des en-têtes et l'URL de base de votre API. Vous pouvez même définir des milieux avec Axios. function getHeaders() {
return {
accept: 'application/json',
authorization: `Bearer ${ getStoredAuthToken() }`,
};
}
function postHeaders() {
return {
'content-type': 'application/json',
authorization: `Bearer ${ getStoredAuthToken() }`,
};
}
export const postRequest = ( endpoint, data ) => axios
.post( API + endpoint, data, { headers: postHeaders() } )
.then( res => res.data )
.catch( ( err ) => {
LoggingUtility.error( `Error in post request to entpoint ${ endpoint }`, err );
if ( isNetworkError( err ) ) {
throwServerNotReachableError();
}
const { status } = err.response;
if ( isUnauthorizedError( status ) ) {
return refreshAuthToken(
() => postRequest( endpoint, data ),
);
}
throw err;
} );
Merci Anre pour la réponse. Je comprends que c'est une bonne pratique de construire ces extratures en dehors du composant. Je vais inspiré par votre code.
J'imagine que l'API Const est le point final (par exemple: myendPoint ). Comme cela ne change pas, je suppose que je peux écrire comme const Api = ' MyendPoint '. Corriger ?
Exactement! J'ai une constante appelée const api = processus.env.host quels points à mon backend local ou de la production basé sur les variables d'environnement :)
J'ai déjà fait cela sur des projets personnels auparavant, voici les bases que j'utilise. Bien sûr, vous devrez modifier cela pour l'authentification, HTTPS, etc., mais Vous l'appellerez avec quelque chose comme (pour une méthode postale similaire) (et une pour l'obtention):
Merci à Sterling pour vous répondre. Puis-je vous demander de lire ce post s'il vous plaît? C'est un essai que j'ai fait pour cette fonction générique. Est-ce, pour vous, un bon code? Merci beaucoup. DOM. Stackoverflow.com/Questtions/60341078 / ...
Oui totalement. Vous pouvez créer une fonction callapi comme ceci: espère que cela vous aide !!
Merci Harshit. Oui avec votre réponse et la réponse de Andre, je dois être capable de construire quelque chose. Merci !
@ Domaine heureux d'aider. Faire upvote si cela vous a aidé!
NPMJS.com/Package/react-fetch-Wrapper
Mais ma suggestion personnelle est Axios
Est-ce une question de réagissance, ou une question javascript plus générale?