Maison >interface Web >js tutoriel >Le support de réaction est-il récupéré ?
Fetch est pris en charge dans React, car Fetch est équivalent à XMLHttpRequest dans Reactjs. Il fournit bon nombre des mêmes fonctions que XMLHttpRequest, mais est conçu pour être plus évolutif et efficace.
Recommandé : "tutoriel vidéo React"
réagir et récupérer
fetch est l'équivalent réactionjs de XMLHttpRequest, qui fournit bon nombre des mêmes fonctionnalités que XMLHttpRequest mais est conçu pour être plus évolutif et efficace.
Le cœur de Fetch réside dans l'abstraction de l'interface HTTP, y compris les requêtes, les réponses, les en-têtes, le corps et la récupération globale pour l'initialisation des requêtes asynchrones. Grâce à ces modules HTTP abstraits implémentés par JavaScript, d'autres interfaces peuvent facilement utiliser ces fonctions ; de plus, Fetch profite également du caractère asynchrone de la requête - il est basé sur Promise.
Comment appliquer fetch dans un projet React ?
Étape 1 : Installer
Si vous utilisez npm pour installer, exécutez cnpm install whatwg-fetch --save pour installer.
Étape 2 : Application dans des projets réels.
Les premiers s'habituent.
Introduisez d'abord le plug-in dépendant, voir ./app/fetch/test.js
Ensuite, vous pouvez lancer une demande d'obtention.
Regardez d'abord le contenu de notre fichier ./app/index.jsx. Il doit faire référence à getData
La récupération ici peut être utilisée après avoir cité. le plug-in. La méthode est très simple à utiliser. Le premier paramètre de la méthode est l'url et le deuxième paramètre est les informations de configuration.
La méthode fetch demande des données et renvoie un objet Promise.
Dans la configuration du code ci-dessus, les informations d'identification : 'inclure' signifie que les requêtes inter-domaines peuvent apporter des cookies (la récupération des requêtes inter-domaines n'apportera pas de cookies par défaut, vous devez le faire manuellement si nécessaire. Spécifiez les
informations d'identification : 'include'. C'est la même chose que withCredentials de XHR), les en-têtes peuvent définir les informations d'en-tête de la requête http.
Le deuxième type de publication utilise
pour référencer le plug-in de la même manière selon la méthode get request Dans notre ./app/index.jsx, nous devons citer <.>
Utilisez ensuite fetch pour lancer une demande de publication (avec la méthode : 'POST'). Le premier paramètre est l'url et le deuxième paramètre est les informations de configuration. Faites attention au format des en-têtes et du corps dans les informations de configuration ci-dessous. Une fois que fetch a soumis les données, le résultat renvoyé est également un objet Promise, identique à la méthode get. Dans les deux utilisations ci-dessus, les objets Promis renvoyés sont différents, l'un est res.text() et l'autre est res.json(). Ces deux méthodes consistent à convertir les données de réponse renvoyées en chaîne ou au format JSON, qui sont également deux formats couramment utilisés en js. Ce que nous devons faire ensuite est en fait une tâche de rationalisation. Si vous écrivez beaucoup de code comme ci-dessus à chaque fois que vous obtenez des données, cela serait trop redondant. Ici, nous résumons les méthodes get et post séparément. Une fois ces deux méthodes résumées, il nous devient assez simple de les réutiliser. Première étape : extraire la partie publique partie getjs partie d'extraction postjs Voyons comment notre fichier ./app/index.jsx est appliqué Ensuite, exécutez le projet Can.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!