web-dev-qa-db-fra.com

Manipulation de l'ajax avec React

Comment dois-je gérer les requêtes ajax dans une application web assez traditionnelle? Spécifiquement avec l'utilisation de React pour les vues, tout en ayant un backend qui gère des données telles que du texte ou autre, mais en utilisant ajax pour enregistrer automatiquement les interactions de l'utilisateur telles que le basculement des options ou le fait d'afficher une publication sur le serveur.

Devrais-je simplement utiliser jQuery pour cela, ou est-ce que quelque chose comme Backbone serait plus bénéfique?

jqueryajaxbackbone.jsreactjs
29
user2442241

Juste au cas où quelqu'un tomberait sur cette information sans le savoir, jQuery facilite grandement l'envoi d'appels AJAX. Comme React n’est que JavaScript, il fonctionnera comme tout autre appel jQuery AJAX. 

La propre documentation de React utilise jQuery pour passer l'appel AJAX. Je suppose donc que c'est suffisant pour la plupart des applications, quelle que soit 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)
    });
  },
41
PythonIsGreat

Vous pouvez utiliser l'API JavaScript Fetch, elle prend également en charge GET et POST, ainsi que des promesses de bilding.

fetch('/api/getSomething').then(function() {...})
13
Alex Ivasyuv

Je n'utiliserais pas JQuery, car les appels de AJAX ne sont en réalité pas si complexes et JQuery est une très grosse dépendance. Voir la note de vanillajs sur les appels AJAX sans bibliothèques: http://Vanilla-js.com/

8
Emil Ingerslev

Je vous propose certainement d'utiliser Fetch API. Il est très simple à comprendre, supporte toutes les méthodes et vous pouvez utiliser async/await au lieu de promise/then et rappeler 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
})

Mieux ou async/await:

(async function fetchAsync () {
    let data = await (await fetch(`https://httpbin.org/get`,{
                                method: `GET`,
                                headers: {
                                    'authorization': 'BaseAuth W1lcmxsa='
                                }
                            })).json();
                      console.log(data);
})();
0
AmerllicA