Introduction
La récupération de données est un aspect essentiel de toute application React. Il est important que les développeurs React comprennent les différentes méthodes de récupération de données et quels cas d'utilisation leur conviennent le mieux.
Mais d'abord, comprenons les promesses JavaScript.
En bref, une promesse est un objet JavaScript qui produira une valeur dans le futur. Cela s'applique généralement aux opérations asynchrones (telles que la récupération de données).
Les promesses ont trois états :
- En attente : où la promesse est toujours en cours
- Réalisé : où la promesse se résout avec succès et renvoie une valeur
- Rejeté : la promesse a échoué avec une erreur
Si une promesse est tenue ou rejetée, elle est résolue. Les promesses ont différentes méthodes pour faire différentes choses en fonction du résultat. Ces méthodes sont discutées plus en détail dans la section suivante.
2. Utilisez la méthode Promise pour obtenir l'API
L'API Fetch fournit une méthode globale fetch() qui permet aux développeurs de récupérer des données de manière simple. Avant fetch(), l’approche traditionnelle consistait à utiliser XMLHttpRequest(). (Cette méthode n'est pas abordée dans cet article, puisque fetch() a été remplacée par un ensemble de fonctionnalités plus puissantes et plus flexibles.)
La méthode fetch() prend un paramètre, l'URL à demander, et renvoie une promesse. Le deuxième paramètre optionnel options est un tableau de propriétés. La valeur de retour de fetch() peut être JSON ou XML (un tableau d'objets ou un objet unique). Sans argument d'options, fetch() fera toujours une requête GET.
La première méthode est celle que vous verrez généralement dans les cas d'utilisation simples de récupération de données et constitue souvent le premier résultat lorsque vous parcourez la documentation de l'API.
Comme mentionné précédemment, nous récupérons les données d'une API qui renvoie une image aléatoire d'un chien et restituons cette image à l'écran. Avant de faire la requête, nous enveloppons le code dans un useEffecthook avec un tableau de dépendances vide, de sorte que la méthode fetch() ne s'exécutera que lorsque le composant est initialement monté.
useEffect(() => {
fetch(URL)
// syntax for handling promises
.then((res) => {
// check to see if response is okay
if (res.ok) {
// if okay, take JSON and parse to JavaScript object
return res.json();
}
throw res;
})
// .json() returns a promise as well
.then((data) => {
console.log(data);
// setting response as the data state
setData(data);
})
// if res is not okay the res is thrown here for error
.catch((err) => {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);Dans l'exemple ci-dessus, nous avons appelé la méthode et transmis l'URL du point de terminaison de l'API. Dans cette méthode, on utilise la méthode de l'objet promise (rappel qui renvoie une promesse).
Nous utilisons cette méthode et transmettons une fonction de rappel pour vérifier si la réponse est OK. Si la réponse est OK, nous prenons les données JSON renvoyées et utilisons cette méthode pour les analyser dans un objet JavaScript. Si la réponse n'est pas normale, nous signalerons une erreur.
Puisque la méthode .json() renvoie également une promesse, nous pouvons enchaîner un autre .then() et transmettre une fonction pour définir l'état des données, qui est ensuite utilisée ailleurs dans le composant. Dans notre exemple, l'API externe renvoie un objet avec une propriété url (qui sera utilisée comme image srcour).
En continuant dans la chaîne, la partie suivante est .catch() pour organiser l'appel d'une fonction lorsque la promesse est rejetée. Cela renvoie également une autre promesse, que nous pouvons ensuite enchaîner.finally() sera appelé indépendamment du fait que la promesse soit résolue (résolue ou rejetée).
Cette méthode .finally() nous permet d'éviter de dupliquer le code dans .then() et .catch() , ce qui en fait un bon endroit pour supprimer l'état de chargement dans notre exemple.
3. Bibliothèque Axios avec méthode Promise
Axios est une bibliothèque client HTTP populaire pour une récupération efficace des données. Il peut être facilement installé dans les applications React via npm ou d'autres gestionnaires de packages. L'utilisation d'Axios est une alternative à l'API Fetch, qui présente certains avantages si cela ne vous dérange pas d'installer des bibliothèques externes.
Le deuxième exemple sera très proche du code du premier exemple, utilisant la même méthode de promesse pour gérer l'état de la promesse et la réponse.
Après avoir récupéré () la bibliothèque Axios dans notre composant, nous pouvons utiliser axios.get() une méthode qui transmettra l'URL à notre point de terminaison d'API externe.
Cela renvoie une promesse, nous pouvons donc adopter la même approche que le chaînage de méthodes Promise.
useEffect(() => {
axios.get(URL)
// syntax for handling promises
.then((res) => {
console.log(res.data);
// axios converts json to object for us (shortens our code)
setData(res.data);
})
// axios takes care of error handling for us instead of checking manually
.catch((err) => {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);La différence évidente entre le code de l'API Fetch et cette méthode Axios est qu'avec Axios nous n'en avons besoin que d'un seul car Axios convertit le .then() JSON en objets JavaScript pour nous (raccourcissant notre code).
De plus, nous n'écrivons plus de conditions pour générer manuellement des erreurs, car axios générera pour vous des erreurs comprises entre 400 et 500 (en raccourcissant encore une fois notre code).
4. Fonction asynchrone (async/wait)
Dans cet exemple, nous abandonnerons le chaînage de promesses que nous avons utilisé dans les deux exemples précédents et introduirons à la place une approche plus moderne de l'écriture de code asynchrone basé sur des promesses.
Cette approche peut être utilisée avec n'importe quel mécanisme de récupération de votre choix, mais pour cet exemple, nous nous en tiendrons à la bibliothèque Axios.
Le troisième exemple configure le composant de la même manière que l'exemple précédent en important la bibliothèque Axios, puis en encapsulant le code pour obtenir les données dans useEffecta avec un tableau de dépendances vide.
Dans useEffect, nous utilisons le mot-clé async pour créer une fonction asynchrone. Dans cette fonction, nous avons trois parties distinctes : essayer, attraper et enfin.
Cette approche try/catch est utilisée pour gérer les erreurs en JavaScript. Le code à l'intérieur du bloc try est exécuté en premier, si des erreurs sont générées, elles seront "attrapées" dans le bloc, intercepteront et exécuteront le code interne.
Enfin, un bloc final s'exécutera toujours une fois que le flux aura traversé le try/catch.
useEffect(() => {
// create async function b/c cannot use async in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(URL);
setData(res.data);
} catch (err) {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};
fetchData ();
}, []);Dans cet exemple, le bloc try crée une variable nommée res (abréviation de réponse) qui utilise le mot-clé async. Cela permet au code de paraître synchrone (plus court et plus agréable à regarder).
Dans cet exemple, axios.get(URL) "attend" jusqu'à ce qu'il se stabilise. Si la promesse est tenue, nous mettons les données dans l'état. Si la promesse est rejetée (génére une erreur), elle entre dans le bloc catch.
5. Créez un React Hook personnalisé « useFetch »
Une quatrième approche consiste à créer notre propre hook React personnalisé qui appelle useFetchit qui peut être réutilisé dans différents composants de notre application et à supprimer le code de récupération maladroit de chaque composant.
Cet exemple ne fait que prendre le quatrième exemple (en utilisant les mêmes techniques de la bibliothèque Axios et async/await) et déplacer ce code dans son propre hook personnalisé.
Pour ce faire, nous créons une fonction appelée useFetch.js. Ensuite, nous ajoutons tout le code de l'exemple précédent avec les différents états que nous suivons dans la fonction useFetch à l'aide d'un effet.
Enfin, cette fonction renverra un objet contenant chaque état, puis utilisera Fetchaccessed là où le hook est appelé. Notre useFetchhook acceptera également un paramètre, l'URL, pour permettre plus de réutilisation et la possibilité d'effectuer des requêtes de récupération vers différents points de terminaison.
const useFetch = (url) => {
const [data, setData] = useState(null);
const [ loading , setLoading ] = useState ( true );
const [error, setError] = useState(null);
useEffect(() => {
// create async function b/c cannot use asyc in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(url);
setData(res.data);
} catch (err) {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};
fetchData ();
}, []);
return {
data,
loading,
error,
};
};Enfin, nous importons ce nouveau hook personnalisé dans le composant qui l'utilisera, et l'appelons comme n'importe quel autre hook React. Comme vous pouvez le constater, cela améliore considérablement la lisibilité du code et raccourcit notre composant.
Le dernier point de cette approche est que vous pouvez également installer des bibliothèques externes au lieu de créer vos propres hooks personnalisés. Une bibliothèque populaire React-fetch-hook a des fonctionnalités très similaires à celles du hook que nous venons de construire.
6. Bibliothèque de requêtes React
L'un des moyens les plus modernes et les plus puissants de récupérer des données dans React consiste à utiliser la bibliothèque React Query. Il fait bien plus qu'une simple récupération de données, mais pour cet exemple, nous apprendrons comment récupérer simplement des données à partir du même exemple d'API externe.
Une fois installé et importé, React Query fournit un certain nombre de hooks personnalisés qui peuvent être réutilisés dans nos composants de manière très propre.
Dans cet exemple, nous importons QueryClient à partir de celui-ci, puis encapsulons notre application avec un fournisseur, en transmettant l'instance QueryClientProvider en tant que propriété au wrapper.
Cela nous permet d'utiliser la bibliothèque dans notre application.
Pour effectuer cette simple requête GET, nous importons et utilisons useQueryhooks. Contrairement à l’exemple précédent utilisant un hook personnalisé, nous transmettons deux paramètres.
Le premier paramètre obligatoire est queryKey, qui est utilisé comme clé de référence pour cette requête spécifique.
Le deuxième paramètre obligatoire est queryFn, qui est la fonction que la requête utilisera pour demander des données.
Au lieu de simplement transmettre une simple URL comme dans notre précédent exemple de hook personnalisé, nous utiliserons cette fonction de requête, puis utiliserons l'API Fetch et la syntaxe de la méthode de promesse pour la récupération initiale. (Ce hook a de nombreux autres paramètres facultatifs.)
const { isLoading, error, data } = useQuery("dogData", () => fetch(URL).then((res) => res.json()));isLoading À partir de là, React Query effectuera tout le travail supplémentaire en coulisses, dans ce cas, nous pouvons appeler la destruction, l'erreur et utiliser les données dans notre application à partir de ce hook, bien que nous puissions également accéder à de nombreuses autres valeurs.
Dans un exemple plus large que notre exemple actuel d'API Dog Image, la puissance et les avantages de l'utilisation de React Query sont évidents. Certaines fonctionnalités supplémentaires à mentionner incluent : la mise en cache, la mise à jour des données « obsolètes » en arrière-plan et d'autres avantages liés aux performances.
7. Requête RTK de la boîte à outils Redux
La dernière méthode de cet article consiste à utiliser la requête RTK de Redux Toolkit pour la collecte de données. Il est très courant que les applications utilisent Redux pour la gestion des états.
Si votre entreprise ou votre projet parallèle actuel utilise Redux, une bonne option consiste à utiliser des requêtes RTK pour récupérer des données, car elles offrent une simplicité et des avantages similaires aux requêtes React.
Pour commencer à utiliser les requêtes RTK partout où votre code Redux est stocké, créez un fichier rtkQueryService.js pour configurer la récupération de données.
Une fois créé, vous ajoutez le service à votre boutique Redux, en supposant que vous utilisez déjà Redux, vous disposerez déjà d'un composant de boutique <Provider> qui contient votre application.
À partir de là, cela ressemble beaucoup à l'utilisation d'un hook personnalisé avec une méthode React Query, vous importez puis utilisez le hook de requête et déstructurez les données, les erreurs, puis le chargement peut être utilisé dans vos composants.
const { data, error, isLoading } = useGetDogQuery();Comme vous pouvez le voir, Redux a beaucoup de paramètres, ce n'est donc peut-être pas la meilleure approche pour notre cas d'utilisation, mais si vous utilisez déjà Redux dans une application React et que vous souhaitez un moyen simple et moderne d'obtenir des données, les requêtes RTK pourrait être génial Stick est d'un excellent rapport qualité-prix, qui offre également des avantages tels que la mise en cache.
dernières pensées
Si vous êtes arrivé jusqu'ici, félicitations ! Le but de cet article est de présenter différentes méthodes de récupération de données pour ceux qui apprennent React.
Dans cet article, j'ai présenté 6 méthodes, j'espère que ces 6 méthodes vous seront utiles et j'espère que vous pourrez en apprendre quelque chose de nouveau.
En outre, il existe d'autres méthodes actuelles de récupération de données qui ne sont pas couvertes dans cet article, et je suis sûr que d'autres apparaîtront à mesure que l'écosystème React se développe. Cela dit, je pense que cet article fournit une base solide pour comprendre le domaine.
Expansion du contenu connexe : (Frontière technique)
Au cours des dix dernières années, lorsque même les entreprises traditionnelles ont commencé à numériser à grande échelle, nous avons constaté que dans le processus de développement des outils internes, un grand nombre de pages, de scènes, de composants, etc. étaient constamment répétés. la roue a fait perdre beaucoup de temps aux ingénieurs.
En réponse à de tels problèmes, le low-code visualise certains scénarios et processus récurrents dans des composants individuels, des API et des interfaces de base de données, évitant ainsi la création répétée de roues. Productivité des programmeurs grandement améliorée.
Recommander une plate-forme de développement rapide du logiciel JNPF que les programmeurs devraient connaître, adopte l'architecture de micro-service SpringBoot de pointe, prend en charge le mode SpringCloud, améliore les bases de l'expansion de la plate-forme et répond aux besoins de développement rapide du système, d'expansion flexible, d'intégration transparente et de haute Des capacités complètes telles que les applications de performance ; en adoptant le mode de séparation front-end et back-end, les développeurs front-end et back-end peuvent travailler ensemble pour être responsables de différentes sections, économisant ainsi des problèmes et des commodités.
Site officiel d'essai gratuit : https://www.jnpfsoft.com/?csdn
Si vous n’avez pas compris la technologie low-code, vous pouvez l’expérimenter et l’apprendre rapidement !