Maison >interface Web >js tutoriel >Le support de réaction est-il récupéré ?

Le support de réaction est-il récupéré ?

藏色散人
藏色散人original
2020-12-15 09:55:051697parcourir

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.

Le support de réaction est-il récupéré ?

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.

Le support de réaction est-il récupéré ?

É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

Le support de réaction est-il récupéré ?

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

Le support de réaction est-il récupéré ?

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.

Le support de réaction est-il récupéré ?

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 <.>

Le support de réaction est-il récupéré ?

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.

Le support de réaction est-il récupéré ?

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

Le support de réaction est-il récupéré ?

partie getjs

Le support de réaction est-il récupéré ?

partie d'extraction postjs

Le support de réaction est-il récupéré ?

Voyons comment notre fichier ./app/index.jsx est appliqué

Le support de réaction est-il récupéré ?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn