Manipulation d'ajax avec React
Comment dois-je traiter les requêtes ajax dans une application web assez traditionnelle? En particulier avec L'utilisation de React for views, tout en ayant un backend qui traite des données telles que le texte et ce qui ne l'est pas, mais en utilisant ajax pour enregistrer automatiquement les interactions utilisateur telles que les options de basculement ou d'aimer un post au serveur.
est-ce que je devrais juste utiliser jQuery pour ça, ou est-ce que quelque chose comme L'épine dorsale serait plus bénéfique?
5 réponses
juste au cas où quelqu'un tomberait sur ceci et ne sait pas, jQuery rend très facile d'envoyer des appels AJAX. Comme React n'est Qu'un JavaScript, il fonctionnera comme tous les autres appels AJAX jQuery.
la propre documentation de React utilise jQuery pour faire L'appel AJAX donc je suppose que c'est assez bon pour la plupart des buts indépendamment ou la pile.
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
veuillez consulter la documentation officielle de Facebook sur Complementary Toolshttps://github.com/facebook/react/wiki/Complementary-Tools
ils recommandent simplement peu de données allant chercher des API comme
- axios: client HTTP basé sur la promesse pour le navigateur et le noeud.js.
- jQuery AJAX: pas d'introduction nécessaire.
- superagent: une bibliothèque "isomorphe" légère pour les requêtes AJAX.
- reqwest: AJAX à nouveau. Inclut la prise en charge de XMLHttpRequest, JSONP, CORS et CommonJS Promises A. La prise en charge du navigateur remonte à IE6.
Mon préféré serait axios en raison de promesses qui fonctionne dans le navigateur ainsi que dans nodejs env et même officiellement réactjs site web recommande le même AJAX et APIs
Vous pouvez utiliser L'API JavaScript Fetch, il supporte GET et POST ainsi que des promesses de bilding.
fetch('/api/getSomething').then(function() {...})
Je n'utiliserais pas JQuery, puisque les appels AJAX ne sont pas si complexes et JQuery est une dépendance assez importante. Voir vanillajs' remarque sur le fait de faire des appels AJAX sans bibliothèques: http://vanilla-js.com/
j'ai vraiment proférer vous d'utiliser Fetch API. Il est très simple à comprendre, prend en charge toutes les méthodes, et vous pouvez utiliser async/await au lieu de promise/then et rappelez l'enfer.
Par exemple:
fetch(`https://httpbin.org/get`,{
method: `GET`,
headers: {
'authorization': 'BaseAuth W1lcmxsa='
}
}).then((res)=>{
if(res.ok) {
return res.json();
}
}).then((res)=>{
console.log(res); // It is like final answer of XHR or jQuery Ajax
})
Dans une meilleure façon ou d' async/await:
(async function fetchAsync () {
let data = await (await fetch(`https://httpbin.org/get`,{
method: `GET`,
headers: {
'authorization': 'BaseAuth W1lcmxsa='
}
})).json();
console.log(data);
})();